/*
Theme Name: Substratum
Theme URI: https://www.3n.design
Description: A custom Wordpress theme for substratum.digital, designed and developed by 3n Design.
Author: 3n Design
Author URI: https://www.3n.design
Version: 1.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Variables
	2.	Typography
	3. 	Layout Base
	4. 	Site Header
	5.  Entry Content
	6.  Blocks
    7.	Templates
	8.  Site Footer
    9.  Transitions
	10. Accessibility

-------------------------------------------------------------- */

/* --------------------------------------------------------------
= 0. CSS Reset
-------------------------------------------------------------- */

html,
body {
	border: none;
	margin: 0;
	padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
* {
	-webkit-tap-highlight-color: transparent !important;
}
button,
input,
textarea {
	-webkit-appearance: none;
}

/* --------------------------------------------------------------
= 1. Variables
-------------------------------------------------------------- */

:root {
	--sub--color--primary: #eeeeee;
	--sub--color--secondary: #929295;
	--sub--color--tertiary: #2d55ff;
    --sub--color--quatrenary: #bfbfbf;
	--sub--color--background: #1b1b1c;
    --sub--color--footer: #ffffff;
    --sub--color--footer-bg: #111111;
    --sub--weight--medium: 500;
    --sub--weight--semibold: 600;
    --sub--weight--bold: 700;
	--sub--header: clamp(3.75rem, 2.0455rem + 8.5227vw, 7.5rem);
	--sub--gutter: clamp(0.625rem, 0.483rem + 0.7102vw, 0.9375rem);
	--sub--margin: clamp(0.625rem, 0.483rem + 0.7102vw, 0.9375rem);
	--sub--section--gap: clamp(2.5rem, 1.9318rem + 2.8409vw, 3.75rem);
	--sub--block--gap: 1.5em;
}

/* --------------------------------------------------------------
= 2. Typography
-------------------------------------------------------------- */

@font-face {
    font-family: "Instrument Serif";
    src: url("https://www.substratum.digital/wp-content/themes/substratum/assets/fonts/instrument-serif/InstrumentSerif-Italic.woff2") format("woff2");
    font-display: auto;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("https://www.substratum.digital/wp-content/themes/substratum/assets/fonts/instrument-sans/InstrumentSans.woff2") format("woff2");
    font-display: auto;
    font-style: normal;
    font-weight: 400 900;
    font-stretch: normal;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("https://www.substratum.digital/wp-content/themes/substratum/assets/fonts/instrument-sans/InstrumentSans-Italic.woff2") format("woff2");
    font-display: auto;
    font-style: italic;
    font-weight: 400 900;
    font-stretch: normal;
}
body {
    background-color: var(--sub--color--background);
    color: var(--sub--color--primary);
    font-family: sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.fonts--loaded body {
    font-family: "Instrument Sans", sans-serif;
    font-weight: 400;
}
.has-medium-font-weight {
    font-weight: var(--sub--weight--medium);
}
b, strong,
.has-semibold-font-weight {
    font-weight: var(--sub--weight--semibold);
}
.has-serif-font {
    font-family: "Instrument Serif", sans-serif;
    font-weight: 400;
    font-style: italic;
}

/* --------------------------------------------------------------
= 3. Layout Elements
-------------------------------------------------------------- */

.inner {
    margin-block: 0;
    margin-inline: auto;
	max-width: 1024px;
	padding: 0 var(--sub--gutter);
	position: relative;
}
.pad {
	padding: 0 var(--sub--margin);
}

/* --------------------------------------------------------------
= 4. Site Header
-------------------------------------------------------------- */

#site-header {
    font-size: clamp(1.5rem, 1.1591rem + 1.7045vw, 2.25rem);
    line-height: 1.22em;
    padding-block: var(--sub--header);
}
#site-title {
    font-weight: var(--sub--weight--bold);
}
#site-title a {
    color: var(--sub--color--tertiary);
    text-decoration: none;
}
#site-description {
    color: var(--sub--color--secondary);
    font-weight: var(--sub--weight--semibold);
}

/* --------------------------------------------------------------
= 5. Entry Content
-------------------------------------------------------------- */

.entry-content {
    font-size: clamp(1rem, 0.9432rem + 0.2841vw, 1.125rem);
	line-height: 1.5em;
    margin-block-end: var(--sub--section--gap);
}
.entry-content section {
    margin-block-end: var(--sub--section--gap);
}
.entry-content section:last-child {
    margin-block-end: calc(var(--sub--section--gap) * 2);
}
.entry-content a {
	color: var(--sub--color--primary);
	text-decoration: underline;
	transition: color 300ms ease;
}
.entry-content a:hover {
	color: var(--sub--color--tertiary);
}
.entry-content p,
.entry-content ul,
.entry-content dl,
.entry-content ol,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-block-end: var(--sub--block--gap);
}
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    border-top: 1px solid var(--sub--color--secondary);
    color: var(--sub--color--secondary);
    font-size: 1rem;
    font-weight: var(--sub--weight--semibold);
    line-height: 1rem;
    margin-block-end: clamp(0.9375rem, 0.6534rem + 1.4205vw, 1.5625rem);
    padding-block-start: var(--sub--margin);
}
.entry-content > *:last-child {
    margin-block-end: 0;
}
.entry-content ul {
	list-style: square outside;
	padding-left: var(--sub--block--gap);
}
.entry-content ul ul {
	list-style: disc outside;
	margin-block-end: 0;
	padding-left: var(--sub--block--gap);
}
.entry-content .has-text-align-center {
	text-align: center;
}
.entry-content .has-small-font-size {
    font-size: 1rem;
}
.entry-content .has-medium-font-size {
    font-size: clamp(1rem, 0.7727rem + 1.1364vw, 1.5rem);
    line-height: 1.25em;
}
.entry-content .has-large-font-size {
    color: var(--sub--color--quatrenary);
    font-size: clamp(1.125rem, 0.2727rem + 4.2614vw, 3rem);
}
.entry-content .has-right-margin {
    margin-inline-end: calc(var(--sub--margin) * 2);
}

/* --------------------------------------------------------------
= 6. Blocks
-------------------------------------------------------------- */

.entry-content > * {
    padding-block: 0;
    padding-inline: var(--sub--margin);
}

/* Block: Image  --------------------------------------------- */

.entry-content img {
	display: block;
	height: auto;
	max-width: 100%;
}
.entry-content > .wp-block-image {
    margin-block-end: var(--sub--block--gap) !important;
}
.entry-content .wp-block-image figcaption {
	line-height: 1.5em;
    padding-block-start: 5px;
    padding-block-end: 0;
    padding-inline: 0;
}
@media ( min-width: 48em ) {
    .entry-content .wp-block-image figcaption {
        font-size: 0.75em;
    }	
}
@media ( min-width: 64em ) {
	.alignright figcaption {
		text-align: right;
	}
}

/* Block: Button --------------------------------------------- */

.wp-block-button {
    display: block !important;
    margin-block-end: var(--sub--block--gap);
}
.wp-block-button .wp-block-button__link {
    background-color: transparent;
    border: 1px solid var(--sub--color--secondary);
    border-radius: 8px;
    color: var(--sub--color--primary);
    font-size: 1rem;
    line-height: 48px;
    max-width: 300px;
    padding-block-start: 1px;
    padding-block-end: 1px;
    padding-inline: var(--sub--margin);
    text-decoration: none;
    width: 100%;
    transition: all 300ms ease;
}
.wp-block-button .wp-block-button__link:hover {
    background-color: var(--sub--color--tertiary);
    border: 1px solid var(--sub--color--tertiary);
    color: var(--sub--color--primary);
}

/* Block: Columns -------------------------------------------- */

.entry-content > .wp-block-columns {
    padding-inline: 0;
}
.entry-content section > .wp-block-columns {
    margin-inline: calc(var(--sub--margin) * -1);
}
.entry-content .wp-block-columns > .wp-block-column {
    padding-block: 0;
    padding-inline: var(--sub--margin);
}
.entry-content .wp-block-columns > .wp-block-column:last-child > *:last-child {
        margin-block-end: 0;
    }
@media ( min-width: 36em ) {
    .wp-block-column.flex-basis-33 {
        flex-basis: calc(1 / 3 * 100%) !important;
        max-width: calc(1 / 3 * 100%);
    }
}
@media ( min-width: 48em ) {
    .entry-content .wp-block-columns > .wp-block-column > *:last-child {
        margin-block-end: 0;
    }
    .wp-block-column.custom-flex-basis:first-child {
        flex-basis: calc(2 / 3 * 100%) !important;
        max-width: calc(2 / 3 * 100%);
    }
    .wp-block-column.custom-flex-basis:last-child {
        flex-basis: calc(1 / 3 * 100%) !important;
        max-width: calc(1 / 3 * 100%);
    }
}
@media ( min-width: 64em ) {
    .wp-block-column.flex-basis-33 {
        flex-basis: 25% !important;
        max-width: 25%;
    }
    .wp-block-column.custom-flex-basis:first-child {
        flex-basis: 75%;
        max-width: 75%;
    }
    .wp-block-column.custom-flex-basis:last-child {
        flex-basis: 25%;
        max-width: 25%;
    }
}

/* Block: Embed ---------------------------------------------- */

.wp-block-embed,
.wp-block-video {
    margin-block-end: var(--sub--block--gap) !important;
}
.wp-block-video audio,
.wp-block-video video,
.wp-block-embed iframe {
	width: 100%;
}
.wp-block-embed .wp-block-embed__wrapper {
	height: 0;
	padding-block-end: 56.25%;
	position: relative;
}
.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper {
	padding-block-end: 75%; /* 4:3 */
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	padding-block-end: 56.25%; /* 16:9 */
}
.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper {
	padding-block-end:  41.5625%; /* 21:9 */
}
.wp-block-embed .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------
= 7. Templates
-------------------------------------------------------------- */

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

@media ( min-width: 64em ) {
    .entry-content #about > *:not(.wp-block-heading),
    .entry-content #team > p,
    .entry-content #index > p {
        margin-inline-end: 25%;
    }
}

/* Landing Page: Definition ---------------------------------- */

#definition span {
    display: block;
}
@media ( min-width: 22em ) {
    #definition span {
        display: inline;
    }
}

/* Landing Page: Index --------------------------------------- */

.index {
    margin-block-end: var(--sub--block--gap);
    margin-inline: calc(var(--sub--margin) * -1);
}
.index-header {
    color: var(--sub--color--secondary);
    display: flex;
    flex-wrap: nowrap;
}
.index-header .index-header--type {
    display: none;
}
.index a {
    display: flex;
    flex-wrap: wrap;
    margin-block-end: var(--sub--block--gap);
    text-decoration: none;
}
.index .index--title,
.index-header .index-header--title {
    flex-basis: 100%;
    max-width: 100%;
}
.index .index--type,
.index .index--year,
.index-header .index-header--year {
    flex-basis: 50%;
    max-width: 50%;
}
.index .index--title,
.index .index--type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.index .index--year,
.index-header .index-header--year {
    text-align: right;
}
.asterisk {
    color: var(--sub--color--tertiary);
}
@media ( min-width: 36em ) {
    .index a {
        margin-block-end: 0;
    }
    .index-header .index-header--type {
        display: block;
    }
    .index .index--title,
    .index .index--type,
    .index .index--year,
    .index-header .index-header--title,
    .index-header .index-header--type,
    .index-header .index-header--year {
        flex-basis: calc(1 / 3 * 100%);
        max-width: calc(1 / 3 * 100%);
    }
}
@media ( min-width: 64em ) {
    .index .index--title,
    .index-header .index-header--title {
        flex-basis: 50%;
        max-width: 50%;
    }
    .index .index--type,
    .index .index--year,
    .index-header .index-header--type,
    .index-header .index-header--year {
        flex-basis: 25%;
        max-width: 25%;
    }
}

/* --------------------------------------------------------------
= 8. Site Footer
-------------------------------------------------------------- */

#site-footer {
    background-color: var(--sub--color--footer-bg);
    color: var(--sub--color--footer);
    padding-block-start: 35px;
}
#site-footer a {
	color: var(--sub--color--primary);
	text-decoration: underline;
	transition: color 300ms ease;
}
#site-footer a:hover {
	color: var(--sub--color--tertiary);
}
#fulcrum-arts-logo {
    display: block;
    height: 0.75em;
    margin-block-end: 0.5em;
    overflow: visible;
    width: auto;
}
#fulcrum-arts-logo .fill {
    fill: var(--sub--color--footer);
    transition: all 300ms ease;
}
a:hover #fulcrum-arts-logo .fill {
    fill: var(--sub--color--tertiary);
}
.footer-columns {
    font-size: 1rem;
    line-height: 1.5em;
    margin-block-end: var(--sub--section--gap);
}
.footer-columns .footer-column {
    margin-block-end: var(--sub--block--gap);
}
.colophon-wrapper {
    border-top: 1px solid var(--sub--color--footer);
    display: flex;
    font-size: 0.875em;
    line-height: 50px;
}
#site-copyright {
    flex-grow: 1;
}
#back-to-top {
    cursor: pointer;
    text-align: right;
    width: 10px;
}
#back-to-top a {
    text-decoration: none;
}
@media ( min-width: 48em ) {
    .footer-columns {
        display: flex;
        flex-wrap: wrap;
    }
    .footer-columns .footer-column {
        flex-basis: calc(1 / 3 * 100%)
    }
    .footer-columns .footer-column:last-child {
        text-align: right;
    }
}
@media ( min-width: 64em ) {
    .footer-columns .footer-column {
        flex-basis: 25%
    }
    .footer-columns .footer-column:first-child {
        flex-basis: 50%
    }
}
/* --------------------------------------------------------------
= 9. Transitions
-------------------------------------------------------------- */

html {
    background-color: var(--sub--color--background);
    scroll-behavior: smooth;
}
.js body {
    opacity: 0;
    transition: opacity 500ms ease;
}
.js body.page--loaded {
    opacity: 1
}

/* --------------------------------------------------------------
= 10. Accessibility
-------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
#primary[tabindex="-1"]:focus {
	outline: 0;
}