/* ================================
   ROOT VARIABLES
   ================================ */

   :root {
    /* Fontsizes */
    --fs-s: 0.8rem;
    --fs-m: 1rem;
    --fs-l: 1.5rem;
    --fs-xl: 2rem;

    --bold: bold;

    /* Spacing */
    --x-xs: 0.25rem;
    --x-s: 0.5rem;
    --x-sm: 0.75rem;
    --x-m: 1rem;
    --x-l: 2rem;
    --x-xl: 4rem;
    --wrap-tx: 40rem;
    --wrap-md: 100%; 
    --header-h: ;
    --archive-header-h: ;
    --archive-menu-h: ;


    /* Colors */
    --color-acc: #8F9479;

    --color-000: #ffffff;
    --color-005: #f2f2f2;
    --color-010: #E5E5E5;
    --color-020: #CCCCCC;
    --color-030: #B2B2B2;
    --color-040: #999999;
    --color-050: #808080;
    --color-060: #666666;
    --color-070: #4D4D4D;
    --color-080: #333333;
    --color-090: #1A1A1A;
    --color-100: #000000;

    --color-tx-normal:  var(--color-100);
    --color-tx-muted:   var(--color-040);
    --color-tx-faint:   var(--color-020);
    --color-tx-hover:   var(--color-100);
    --color-tx-accent:  var(--color-acc);

    --color-ui-normal:  var(--color-010);
    --color-ui-hover:   var(--color-100);
    --color-ui-active:  var(--color-100);

    --color-bg-1:       var(--color-000);
    --color-bg-2:       var(--color-005);
    --color-bg-hover:   ;
    --color-bg-active:  var(--color-acc);

    --border:           1px solid var(--color-ui-normal);
    --border-hover:     1px solid var(--color-ui-hover);
    --border-active:    1px solid var(--color-ui-active);

    /* Grid */
    --grid-columns: 12;
    --grid-margin: 1rem;
    --grid-gap: 1rem;

    --grid-gap-total: calc((var(--grid-columns) - 1) * var(--grid-gap));
    --grid-available: calc(100vw - (var(--grid-margin) * 2) - var(--grid-gap-total));
    --col-w-1: calc(var(--grid-available) / var(--grid-columns));
    --col-w-2: calc(var(--col-w-1) * 2 + var(--grid-gap) * 1);
    --col-w-3: calc(var(--col-w-1) * 3 + var(--grid-gap) * 2);
    --col-w-4: calc(var(--col-w-1) * 4 + var(--grid-gap) * 3);
    --col-w-5: calc(var(--col-w-1) * 5 + var(--grid-gap) * 4);  
    --col-w-6: calc(var(--col-w-1) * 6 + var(--grid-gap) * 5);
    --col-w-7: calc(var(--col-w-1) * 7 + var(--grid-gap) * 6);
    --col-w-8: calc(var(--col-w-1) * 8 + var(--grid-gap) * 7);
    --col-w-9: calc(var(--col-w-1) * 9 + var(--grid-gap) * 8);
    --col-w-10: calc(var(--col-w-1) * 10 + var(--grid-gap) * 9);
    --col-w-11: calc(var(--col-w-1) * 11 + var(--grid-gap) * 10);
    --col-w-12: calc(var(--col-w-1) * 12 + var(--grid-gap) * 11);   
}

/* ================================
   BASE STYLES
   ================================ */

html {
    font-size: 20px;
}
@media only screen and (max-width: 480px) {
    html {
        font-size: 15px;
    }
}

/* Chrome, Safari, Edge */
::-webkit-scrollbar * {
  display: none;
}

/* Firefox */
html * {
  scrollbar-width: none;
}

body {
    font-family: "NeueMontreal", Arial, Helvetica, sans-serif;
    letter-spacing: 0.02em;
    color: var(--color-tx-normal);
    background-color: var(--color-bg-1);
    line-height: 1.2;
}

/* || Typography */

@font-face {
    font-family: "NeueMontreal";
    src: url("/assets/fonts/NeueMontreal-Medium.otf");
    font-weight: normal;
}
@font-face {
    font-family: "NeueMontreal";
    src: url("/assets/fonts/NeueMontreal-MediumItalic.otf");
    font-weight: normal;
    font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: var(--x-s) 0;
}



/* || Elements */

a {
    border-bottom: 1px solid transparent;
}

a, a:visited {
    color: var(--color-tx-accent);
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: var(--color-tx-accent);
    /* text-decoration: underline; */
    border-bottom: 1px dotted;
}
a.active {
    color: var(--color-tx-accent);
    /* text-decoration: underline; */
    border-bottom: 1px solid;
}
a.plain {
    color: inherit;
    border-bottom: 1px solid transparent;
    /* text-decoration: none; */
}
a.button {
    border-bottom: none;
}

figure {
    margin: 1rem 0;
}

img {
    width: 100%;
    vertical-align: bottom;
    /* border: var(--border); */
}

img.lazy {
     opacity: 0;
    transition: opacity 0.5s ease;
    width: 100%;
    height: auto;
}

img.loaded {
    opacity: 1;
}

figcaption {
    font-size: var(--fs-s);
    text-align: center;
    margin-top: var(--x-s);
    color: var(--color-tx-muted);
}

hr {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: var(--border);
    margin: var(--x-m) 0;
}

details summary {
    list-style: none;
    cursor: pointer;
}

/* Remove in webkit */
details summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: '→ ';
    transition: transform 0.3s;
    color: var(--color-acc);
}

details[open] summary::before {
    content: '↓ ';
}

.details-content {
  overflow: hidden;
  transition: height 0.3s ease-out;
}


/* || Grid layout */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.col-span-1  { grid-column-end: span 1; }
.col-span-2  { grid-column-end: span 2; }
.col-span-3  { grid-column-end: span 3; }
.col-span-4  { grid-column-end: span 4; }
.col-span-5  { grid-column-end: span 5; }
.col-span-6  { grid-column-end: span 6; }
.col-span-7  { grid-column-end: span 7; }
.col-span-8  { grid-column-end: span 8; }
.col-span-9  { grid-column-end: span 9; }
.col-span-10 { grid-column-end: span 10; }
.col-span-11 { grid-column-end: span 11; }
.col-span-12 { grid-column-end: span 12; }

@media screen and (max-width: 1024px) {
    .col-span-1-tb  { grid-column-end: span 1; }
    .col-span-2-tb  { grid-column-end: span 2; }
    .col-span-3-tb  { grid-column-end: span 3; }
    .col-span-4-tb  { grid-column-end: span 4; }
    .col-span-5-tb  { grid-column-end: span 5; }
    .col-span-6-tb  { grid-column-end: span 6; }
    .col-span-7-tb  { grid-column-end: span 7; }
    .col-span-8-tb  { grid-column-end: span 8; }
    .col-span-9-tb  { grid-column-end: span 9; }
    .col-span-10-tb { grid-column-end: span 10; }
    .col-span-11-tb { grid-column-end: span 11; }
    .col-span-12-tb { grid-column-end: span 12; }
}

@media screen and (max-width: 640px) {
    .col-span-1-mb  { grid-column-end: span 1; }
    .col-span-2-mb  { grid-column-end: span 2; }
    .col-span-3-mb  { grid-column-end: span 3; }
    .col-span-4-mb  { grid-column-end: span 4; }
    .col-span-5-mb  { grid-column-end: span 5; }
    .col-span-6-mb  { grid-column-end: span 6; }
    .col-span-7-mb  { grid-column-end: span 7; }
    .col-span-8-mb  { grid-column-end: span 8; }
    .col-span-9-mb  { grid-column-end: span 9; }
    .col-span-10-mb { grid-column-end: span 10; }
    .col-span-11-mb { grid-column-end: span 11; }
    .col-span-12-mb { grid-column-end: span 12; }
}

.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

.flex {
    display: flex;
    column-gap: 1rem;
}

.col-w-1  { width: var(--col-w-1); }
.col-w-2  { width: var(--col-w-2); }
.col-w-3  { width: var(--col-w-3); }
.col-w-4  { width: var(--col-w-4); }
.col-w-5  { width: var(--col-w-5); }
.col-w-6  { width: var(--col-w-6); }
.col-w-7  { width: var(--col-w-7); }
.col-w-8  { width: var(--col-w-8); }
.col-w-9  { width: var(--col-w-9); }
.col-w-10 { width: var(--col-w-10); }
.col-w-11 { width: var(--col-w-11); }
.col-w-12 { width: var(--col-w-12); }

.col-w-xs   { width: var(--col-w-2); }
.col-w-s    { width: var(--col-w-3); }
.col-w-m    { width: var(--col-w-4); }
.col-w-l    { width: var(--col-w-6); }

@media screen and (max-width: 1280px) {
    .col-w-xs   { width: var(--col-w-4); }
    .col-w-s    { width: var(--col-w-6); }
    .col-w-m    { width: var(--col-w-8); }
    .col-w-l    { width: var(--col-w-12); }
}

@media screen and (max-width: 1024px) {
    .col-w-xs   { width: var(--col-w-4); }
    .col-w-s    { width: var(--col-w-6); }
    .col-w-m    { width: var(--col-w-12); }
    .col-w-l    { width: var(--col-w-12); }
}

@media screen and (max-width: 640px) {
    .col-w-xs   { width: var(--col-w-8); }
    .col-w-s    { width: var(--col-w-12); }
    .col-w-m    { width: var(--col-w-12); }
    .col-w-l    { width: var(--col-w-12); }
}



/* ================================
   Site-wide blocks
   ================================ */

/* || header */
.header {
    width: 100%;
    background-color: var(--color-bg-1);
    position: fixed; /* because of archive-menu needing to be fixed too*/
    top: 0;
    z-index: 1;
}
.header__inner {
    padding: var(--x-s) 0;
    margin: 0 var(--x-m);
    border-bottom: var(--border);
}
.header__nav {
    display: flex;
    justify-content: end; 
}
.header__nav-list {
    display: flex;
    align-items: top;
    column-gap: var(--x-m);
    list-style: none;
}
.header__bio {
    white-space: normal;
}
.header__bio-role::after {
    content: ",";
}
.header__bio-role:last-child::after {
    content: none;
}
.header__bio-role:last-child::before {
    content: "and ";
}
.header__bio-role:first-child::before {
    content: "";
}


/* || Main */
.main {
   margin-top: var(--header-h);
   /* transition: padding-top 0.35s ease;  */
}
.main__inner {
    width: 100%;
    padding: var(--x-xs) var(--x-m);
    padding-bottom: var(--x-xl);
}

/* || Image */

@media only screen and (min-width: 1280px) {
    .figure--portrait {
        width: var(--col-w-4);
        margin: 0 auto;
    }
}
@media only screen and (max-width: 960px) {
    .figure--portrait {
        width: var(--col-w-8);
    }
}
@media only screen and (max-width: 640px) {
    .figure--portrait {
        width: var(--col-w-12);
    }
}

/* ||  Gallery */

.gallery {
    margin: 0;
    padding: 0;
}
.gallery__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
    justify-content: center;
}
.gallery__item {

}

/* @media only screen and (min-width: 961px) {
    .gallery__item--2 {
    width: var(--col-w-2);
    }
    .gallery__item--3 {
        width: var(--col-w-3);
    }
    .gallery__item--4 {
        width: var(--col-w-4);
    }
    .gallery__item--6 {
        width: var(--col-w-6);
    }
    .gallery__item--portrait {
        max-width: var(--col-w-4);
    }
}
@media only screen and (max-width: 960px) {
    .gallery__item {
        width: var(--col-w-6);
    }
}
@media only screen and (max-width: 640px) {
    .gallery__item {
        width: var(--col-w-12);
    }
} */
.gallery__caption {
    text-align: left;
}


/* || Video */

.video {
    margin: 0 auto;
    /* max-height: 800px; */
    /* width: auto; */
    display: flex;
    flex-direction: column;
}
.video video {
    margin: 0 auto;
    /* width: auto; */
    max-width: 100%;
    /* max-height: 800px; */
    object-fit: contain;

}
.video iframe {
    width: 100%;
    height: 100%;
    /* max-height: 800px; */
    object-fit: contain;
}

/* || Audio */

.audio-player {
  display: flex;
  align-items: center;
  gap: var(--x-s);
  padding: 1rem;
  background: var(--color-acc);
  border: var(--border);
  border-radius: var(--x-l);
}

.audio-player__play-pause {
  padding: 0.5rem 1rem;
  cursor: pointer;
  width: 80px;
}

.audio-player__progress-container {
  flex: 1;
  background: var(--color-bg-1);
  height: var(--x-s);
  border: var(--border);
  border-radius: var(--x-s);
  cursor: pointer;
  position: relative;
}

.audio-player__progress-bar {
  height: 100%;
  background: var(--color-tx-normal);
  border-radius: var(--x-s);
  width: 0%;
}

.audio-player__time {
  font-size: var(--fs-s);
  width: 5rem;
}
.audio-player__time,
.audio-player__current,
.audio-player__duration {
  font-variant-numeric: tabular-nums;
}

.audio-player__volume {
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #000 0%, #000 100%, #fff 100%, #fff 100%);
  width: 3rem;
  height: var(--x-s);
  border: var(--border);
  border-radius: var(--x-s);
  cursor: pointer;
}

.audio-player__volume::-webkit-slider-runnable-track {
  background: transparent; /* Remove the track background */
  height: 6px;
}

.audio-player__volume::-moz-range-track {
  background: transparent;
  height: 6px;
}

/* Thumb (the draggable part) */
.audio-player__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background:  var(--color-tx-normal);
  border: var(--border);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px; /* Centers it on the track */
}

.audio-player__volume::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background:  var(--color-tx-normal);
  border: var(--border);
  border-radius: 50%;
  cursor: pointer;
}

/* Focus state */
.audio-player__volume:focus {
  outline: none;
}

/* .audio-player__volume:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.audio-player__volume:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
} */

.audio-player__play-pause {
  width: 1rem;
  height: 1rem;
  background: transparent;
  position: relative;
}

.audio-player__play-pause::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

.audio-player__play-pause.is-playing::before {
  transform: translate(-50%, -50%);
  border: none;
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

/* || Button */
.button {
    padding: 1px 4px 3px 4px;
    color: var(--color-tx-normal);
    background-color: var(--color-bg-2);
    text-decoration: none;
    border-radius: 1px;
    border: var(--border);
    border-color: var(--color-bg-2);
    border-style: dotted;
}
.button:hover {
    box-shadow: var(--shadow-yellow);
    background-color: var(--color-bg-hover);
    border-color: var(--color-acc);
}
.button.active {
    background-color: var(--color-bg-active);
}
.button.disabled {
    pointer-events: none; 
}
.button.muted {
    color: var(--color-tx-faint);
}
.button.muted:hover {
    opacity: 1;
}
.button-eq {
    padding-top: 3px;
}

/* || Entry-item */

a:hover .entry-item__title {
    color: var(--color-tx-accent);
    border-bottom: 1px dotted;
}

.entry-item {
    padding: var(--x-xs) 0;
}
.entry-item__heading {
    /* padding-bottom: var(--x-xs); */
}
.entry-item__cover {
    margin: var(--x-xs) 0;
    border: var(--border);
}
.entry-item__meta {
    font-variant-numeric: tabular-nums;
    color: var(--color-tx-muted);
    font-size: var(--fs-s);
}
.entry-item__date {
    font-variant-numeric: tabular-nums;
    color: var(--color-tx-muted);
    font-size: var(--fs-s);
}


/* || Color label */

.color-label {
    display: inline-block;
    position: relative;
    width: 0.5em;
    height: 0.5em;
    margin-bottom: 0.1em;
    margin-right: 0.1em;
    background-color: grey;
    /* border-radius: 1px; */
    border-radius: 50%;
}

.color-label--large {
    width: 1rem;
    height: 1rem;
}
/* || GRID GUIDE */
.grid-template {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 1rem;
    height: 100vh;
    width: calc(100vw - 2rem);
    pointer-events: none;
}
.grid-template--active {
    display: block;
}
.grid-template .grid-template__content {
    height: 100vh;
    background-color: #0000CC10;
    border-color: #cc000010;
}
.grid-template .grid__cell {
    border-color: #cc000010;
    margin-top: 0;
}

/* || Tags */

.tag::after {
    content: ", ";
}
.tag:last-child::after {
    content: "";
}

/* || Blocks */

.block h3,
.block h4,
.block h5 {
    color: var(--color-tx-muted);
    font-size: var(--fs-s);
    margin-bottom: var(--x-xs);
}

/* ================================
   UTILITIES
   ================================ */

/* Display */
.hidden { display: none; }
@media screen and (min-width: 1025px) {
    .hidden-dt { display: none; }
}
@media screen and (max-width: 1024px) {
    .hidden-tb { display: none; }
}

@media screen and (max-width: 640px) {
    .hidden-mb { display: none; }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Text colors */
.tx-plain   { color: var(--color-tx-normal); }
.tx-muted   { color: var(--color-tx-muted); }
.tx-faint   { color: var(--color-tx-faint); }

/* Text size */
.tx-smaller { font-size: 0.8em; }

/* Text styling */
.tx-strong  { font-weight: var(--bold); }
.tx-right   { text-align: right;}

.tx-inline  {   display: inline;}

/* Titles */
.item-title {
    font-size: var(--fs-m);
    font-weight: normal;
    margin: 0;
}
.small-title {
    font-size: var(--fs-s);
    font-weight: normal;
    color: var(--color-tx-muted);
    margin-top: 0;
    margin-bottom: var(--x-xs);
}

.section-title {
    font-size: var(--fs-s);
    font-weight: normal;
    color: var(--color-tx-muted);
    margin-bottom: var(--x-xs);
}