@import url('css/normalize.min.css');
@import url('css/fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css');
@import url('https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.css');

/*  
Theme Name: David Stagg - 2025
Theme URI: https://davidstagg.com
Description: Middle of the summer in a cheetah mink
Author: David Stagg
Author URI: https://davidstagg.com
Text Domain: davidstagg
Version: 2.1
*/
:root {
	/* Colors */
	--black: #000000;
	--dark-grey: #484848;
	--mid-grey: #8e8e8e;
	--light-grey: #dbdbdb;
	--white: #FFFFFF;
	--primary-color: red;
	--secondary-color: #8c5aff;
	--secondary-light: #b08eff;
	--secondary-dark: #360f90;
	--secondary-super-dark: rgb(26, 0, 45);
	
	/* Primary / Secondary as rgb */
	--primary-rgb: 255, 0, 0;
	--secondary-rgb: 140, 90, 255;
	--black-rgb: 0, 0, 0;
	
	/* Define opacities */
	--opacity-light: 0.3;
	--opacity-medium: 0.5;
	--opacity-heavy: 0.7;

	/* Typography */
	--font-base: 'Quadrant Text Mono', serif;
	--font-flair: 'SelfModern', seric;
	--font-italic: 'SelfModern', serif;
	--font-thin: 'ES Nein', sans-serif;
	--font-mono: 'Neureal Regular', monospace;
	--font-cursive: 'Ballet', cursive;
	--font-david-stagg: 'IPAMincho', serif;
	
	--line-height-close: 1.2;
	--line-height-mid: 1.4;
	--line-height-body: 1.7;
}

/* Base Elements */
html {
	font-size: 16px;
	scroll-behavior: smooth;
	color-scheme: light dark;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-size-adjust: 100%;
	font-family: var(--font-base);
	font-weight: 400;
	font-style: normal;
	line-height: var(--line-height-body);
}

body {
	min-height: 100vh;
	background-color: var(--black);
	color: var(--white);
	overflow-wrap: break-word;
	word-wrap: break-word;
	letter-spacing: -1px;
}

/* Selection Styles */
::selection {
	background: var(--primary-color);
	color: var(--light-grey);
	text-shadow: none;
}
::-moz-selection {
	background: var(--primary-color);
	color: var(--light-grey);
	text-shadow: none;
}

/* Accessibility */
.screen-reader,
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
}

audio, canvas, iframe, img, svg, video { vertical-align: middle; }
code, kbd, pre, samp { line-height: var(--line-height-close); }

/* typography */
h1, h2, h3, h4,
h1 a, h2 a, h3 a, h4 a { font-family: var(--font-base); font-weight: normal; color: var(--white); text-decoration: none; line-height: 1; text-transform: uppercase; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { color: var(--primary-color); border-color: var(--light-grey); }
h1, h2, h3, h4 { font-size: 3rem; margin: 3rem 0 2rem; }
h1 { margin-top: 0; letter-spacing: -0.25rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
p, ul, ol, dl, dd { margin: 2rem 0; font-size: 1.1rem; color: var(--light-grey); }
ul, ol, dl, dd { padding: 0 0 0 1.8rem; }
ul ul, ul ol, ol ol, ol ul { margin: 1rem 0 1rem 1.5rem; }
li { margin: 0.25rem 0; padding: 0; }

/* Buttons and Links */
a, a:visited, button, .btn { color: var(--secondary-light); outline: 0; text-decoration: none; border-bottom: 2px solid var(--secondary-dark); }
a:hover, button:hover, a:focus { color: var(--white); outline: 0; border-color: var(--secondary-light); }

/* image handling */
img { max-width: 100%; width: 100%; height: auto; display: block; }
img.loading { opacity: 0; transition: opacity 0.3s ease-in-out; }
img.loaded { opacity: 1; }
figure.wp-block-image,
.wp-block-image { margin: 2rem -1rem; width: calc(100% + 2rem); }
.alignfull { margin: 2rem calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignwide { margin: 2rem calc(25% - 25vw); max-width: 75vw; width: 75vw; }
figure.wp-block-image.is-style-rounded img { aspect-ratio: 1; }
figure a,
.wp-block-image>a,
.wp-block-image>figure>a { display: block; }
figure.feat-img { border: 1px solid var(--secondary-dark); }
figure figcaption,
figure.wp-block-image figcaption { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0; line-height: 1; background-color: var(--black-rgb); color: var(--secondary-color); padding: 0.5rem; border-top: 1px solid var(--secondary-dark); text-align: left; }
figure figcaption a { display: inline; }

/* blockquotes */
blockquote, q { quotes: none; }
blockquote,
blockquote.wp-block-quote { position: relative; margin: 3rem 0 0; font-family: var(--font-mono); color: var(--mid-grey); font-size: 1.2rem; padding-left: 2rem; border-left: 1px solid var(--secondary-color); }
blockquote p { font-size: 1.2rem; letter-spacing: 0; }
blockquote p:first-of-type { margin-top: 0; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote:before { font-family: var(--font-mono); content: '\201C'; font-size: 16rem; line-height: 1; color: var(--secondary-dark); position: absolute; top: -3rem; z-index: -1; opacity: 0.5; }
blockquote cite,
.wp-block-quote cite,
.wp-block-quote footer { display: block; font-size: 1rem; font-family: var(--font-base); font-weight: 700; position: relative; color: var(--secondary-color); font-style: normal; padding-left: 1.5rem; letter-spacing: -0.05rem; }
blockquote cite:before { font-family: var(--font-mono); position: absolute; left: 0; top: -2px; content: '\2020\00A0'; }

/* Make any core embed wrapper size itself via aspect-ratio and fill children */
.wp-block-embed__wrapper { display:block; max-width:100%; }
.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper > embed,
.wp-block-embed__wrapper > video,
.wp-block-embed__wrapper > object {
  width: 100%;
  height: 100%;
  display: block;
}

sub, sup { font-size: 65%; top: -0.6rem; color: var(--secondary-light); font-family: var(--font-mono); font-weight: 700; left: 0.1rem; }
em { font-family: var(--font-italic); font-size: 1.1rem; font-weight: 700; letter-spacing: 0; }
cite em { font-size: 1rem; }
button, input, select, textarea { color: var(--primary-color); }
label { display: inline-block; color: var(--secondary-color); font-size: 1.1rem; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
hr,
hr.wp-block-separator,
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { position: relative; display: block; height: 1px; border: 0; border-top: 1px solid var(--primary-color); margin: 4rem auto; padding: 0; width: 80%; }
/* hr::after { content: ''; position: absolute; position: absolute; left: 50%; } */
small { font-size: 1rem; line-height: 1; display: block; margin: 2rem 0; text-transform: uppercase; }
small em { font-size: 0.88rem; }
pre, .pre { color: var(--light-grey); font-family: var(--font-mono); line-height: 1.2; }

svg { fill: var(--secondary-color); height: 100%; }

/* flex columns */
.flex-column { display: flex; flex-direction: column; }

/* Motion Preferences */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* easing helper class */
.ease { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease; transition-timing-function: ease; }
/* Foggy window effect */
@supports (backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem)) {
	.foggy { -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); background-color: hsla(0, 0%, 100%, .3); }
} 
/* Fnacy text gradient fallback */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.gradient-text { background-image: linear-gradient(0deg, var(--secondary-color) 0%, var(--primary-color) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}

/* drop cap */
.writings p:first-of-type::first-letter,
.drop-cap { initial-letter: 3; -webkit-initial-letter: 3; float: left; font-size: 3.5rem; padding-top: 0.4rem; margin-right: 1rem; font-family: var(--font-thin); color: var(--secondary-color); }

/* other misc helpers */
a.permalink-note { text-transform: uppercase; font-family: var(--font-base); font-size: .75rem; }

/* Lightbox Updates */
.featherlight .featherlight-content { border: 0; background-color: var(--black); padding: 0.75rem; }
.featherlight .featherlight-close-icon { color: var(--white); background: var(--black); right: 0.75rem; top: 0.75rem; }
.featherlight .featherlight-close-icon:hover { color: var(--primary-color); }
.featherlight-next { right: 0; }
.featherlight-previous { left: 0; }
.featherlight-next:hover, .featherlight-previous:hover { background-color: rgba(0,0,0,.7); }
.featherlight-next span, .featherlight-previous span { text-shadow: none; font-size: 0.75rem; line-height: 1; margin-top: -0.75rem; background-color: var(--black); padding: 0.5rem; right: auto; left: auto; width: 25px; padding: 7px 7px 4px; }
.featherlight-previous span { left: 0.75rem; padding: 0.5rem 0.5rem 6px 5px }
.featherlight-next span { right: 0.75rem; padding: 0.5rem 5px 6px 0.5rem; }
.gallery a { display: block; } /* custom to featherlight, added gallery class to display gallery images as blocks */

.base-wrap { padding: 1rem; position: relative; }

header.stagg { margin-bottom: 4rem; }
header.stagg .height-logo { text-decoration: none; border: 0; }
header.stagg .height-logo h2 { margin: 0; display: flex; align-items: center; font-family: var(--font-david-stagg); text-transform: uppercase; letter-spacing: -0.25rem; font-size: 2rem; }
header.stagg .height-logo h2 svg { fill: var(--primary-color); height: 3rem; flex-grow: 1; }
header.stagg .sidebar { display: none; position: sticky; top: 1rem; }
header.stagg .sidebar .width-logo .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0.5rem; }
header.stagg .sidebar .width-logo .cell { text-align: center; aspect-ratio: 1/1; width: 2.5rem; display: flex; align-items: center; justify-content: center; }
header.stagg .sidebar .width-logo .merged { grid-row: 2 / span 3; grid-column: 2; height: 100%; }

main.front,
main.front > section,
.group-me { display: flex; flex-direction: column; gap: 2rem; }
.evergreen,
.posts > section { gap: 2rem; }
section h3 { font-family: var(--font-flair); transform: scaleX(0.8); transform-origin: center; letter-spacing: 0; text-align: center; margin: 10rem 0 0; }
section h3 svg { height: 4rem; margin-bottom: 1rem; width: 100%; transform: scaleX(1); }
section a.full-more { display: block; font-family: var(--font-base); color: var(--primary-color); border: 1px solid var(--secondary-dark); padding: 0.8rem 1rem 0.7rem; text-align: center; border-radius: 0.25rem; text-transform: uppercase; line-height: 1; }
section a.full-more:hover { border-color: var(--primary-color); }

.row { display: flex; flex-direction: column; }

.sidebar { font-family: var(--font-mono); color: var(--mid-grey); }
.sidebar a { color: var(--light-grey); border: none; }
.sidebar a:hover { color: var(--primary-color); }


a.card { display: flex; color: var(--white); flex-direction: column; position: relative; padding: 1rem; border-radius: 0.5rem; overflow: hidden; aspect-ratio: 2/3; overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(200, 200, 200, 0.1);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: inset 0.25rem 0.25rem 0.5rem rgba(200, 200, 200, 0.1), inset 0 0.5rem 1rem rgba(29, 29, 29, 0.1), inset -0.25rem -0.25rem 0.25rem  rgba(0, 0, 0, 0.2); }
a.card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: -1; mix-blend-mode: overlay; }

/* carve out for bio and book cards at the top */
main.front .card.tbo::before,
main.front .card.bio::before { background-position: center bottom; }
main.front .card.tbo::before { background-image: url('images/burned-vert.jpg'); }
main.front .card.bio::before { background-image: url('images/dstagg-portrait.jpg'); }	
@keyframes cardZero {
	0% { filter: grayscale(100%) brightness(20%); }
	35% { filter: grayscale(80%) brightness(100%); }
	50% { filter: grayscale(0%) brightness(100%); }
	75% { filter: grayscale(0%) brightness(80%); }
	100% { filter: grayscale(100%) brightness(20%); }
}

a.card section small { margin: 0 auto; padding: 0.05rem 1rem; background-color: var(--black); color: var(--primary-color); border-radius: 0.25rem; letter-spacing: 2px; font-size: 1rem; }
a.card section h2 { margin: 2rem -0.4rem 0; padding: 0.25rem 0.4rem; background-color: var(--black); border-radius: 0.25rem; font-size: 1.6rem; font-family: var(--font-base); text-align: left; }
a.card section small.date { width: fit-content; margin: 1rem 0 1rem -0.4rem; padding: 0.05rem 1.3rem 0.05rem 0.4rem; color: var(--secondary-color); }
a.card.tbo section h4 { margin: 0.25rem 0; font-size: 1.5rem; }

a.card section.upper { display: flex; flex-direction: column; flex-grow: 1; text-align: justify; }
a.card section.upper .excerpt p { margin: 1rem 0 0 0; }
a.card section.lower { text-align: center; }
a.card section.lower label::before,

/* javascript handling */
a.card { filter: blur(20px) brightness(20%); transform: translate(0, 0); transition: filter 0.3s ease; }
a.card::before { filter: grayscale(100%); }
a.card-visible { filter: blur(0); }
a.card-visible::before { filter: grayscale(0%) brightness(0%); animation: cardZero 20s ease-in-out forwards; }

.date,
.date:visited,
.article-header small.date { text-transform: uppercase; padding: 0.05rem 0.25rem; margin-left: -0.25rem; background-color: var(--black); color: var(--primary-color); border-radius: 0.25rem; letter-spacing: 2px; font-family: var(--font-base); transform-origin: unset; transform: none; }
.meta
.article-header small.meta { margin: 0 auto; padding: 0.05rem 1rem; color: var(--secondary-color); border-radius: 0.25rem; letter-spacing: 2px; width: fit-content; text-transform: uppercase; }

/* Cards Posts Specific */
.writings a.card,
a.card.writing { aspect-ratio: 1; }
.writings a.card:hover,
a.card.writing:hover { border-color: var(--secondary-dark); transform: translate(0.05rem, -0.05rem); }

/* Cards Features Specific */
a.card .feature-subject small.subject-tag { padding: 0; margin: 0; font-family: var(--font-thin); font-size: 3rem; background-color: transparent; line-height: 1; }

/* Cards Links Specific */
.link-post a.link-card-link { border-radius: 0.5rem; overflow: hidden; display: flex; padding: 1rem; color: var(--white); width: 100%; border: 1px solid var(--secondary-dark); position: relative; background-color: var(--black); }
.link-post a.link-card-link .link-content { z-index: 2; }
.link-post a.link-card-link:hover { border-color:  var(--primary-color); }
.link-post a.link-card-link h4 { margin: 0 0 1rem; display: flex; gap: 1rem; flex-direction: column; }
.link-post a.link-card-link h4 span { font-size: 1rem; text-transform: none; color: var(--secondary-color); padding-top: 0.2rem; }
.link-post a.link-card-link p { margin: 0.25rem 0; }
.link-post a.link-card-link h4 small { display: inline-block; margin: 0 0 0 .5rem; }

/* Video Home Page Specific */
/* Overwrite some home page widths */
main.front .video .article-header .post-meta { width: 100%; max-width: 100%; margin: 0; }
main.front .video figure { margin: 0; }

/* Quotes Home Page */
.home .quote-content-stub { margin-bottom: 2rem; }


main.primary,
main.sub { width: 100%; }
section.break { text-align: center; margin: 10rem 0; }
main.front section.break { margin: 5rem 0; }

section.break svg { height: 5rem; }
hr.footer-topper { outline: 0; border: 0; height: 2rem; background-color: var(--secondary-color); opacity: 0.5; width: 100%; margin-top: 10rem; }
section.break.footer-break { display: flex; flex-direction: column; justify-content: center; gap: 2rem; height: 100vh; }


p.nav-title { text-transform: uppercase; font-family: var(--font-base); margin-bottom: 1rem; }

/* related posts at bottom of details */
nav.pagination-single { display: flex; justify-content: space-between; position: relative; margin: 0 0 5rem; gap: 1rem; flex-direction: column; line-height: 1; }
nav.pagination-single a,
nav.pagination-single .post-page-numbers { display: flex; font-family: var(--font-mono); gap: 1rem; flex-direction: row; }
nav.pagination-single img { width: 20%; aspect-ratio: 1 / 1; object-fit: cover; }


/* paginations — .nav-links is for archive.php and movie grid overrides */
nav.pagination { margin-top: 2rem; }
nav.pagination .nav-links,
.page.page-template-default .movie-grid-pagination ul { display: flex; justify-content: space-between; position: relative; margin: 0 0 5rem; gap: 1rem; flex-direction: row; line-height: 1; }
nav.pagination .nav-links .page-numbers,
.page.page-template-default .movie-grid-pagination ul li a,
 .page.page-template-default .movie-grid-pagination ul li span{ font-size: 1.1rem; padding: 0.6rem; border: 1px solid var(--secondary-dark); border-radius: 0.25rem; display: flex; font-family: var(--font-mono); gap: 1rem; flex-direction: row; background-color: var(--black); }
nav.pagination .nav-links .page-numbers:hover,
.page.page-template-default .movie-grid-pagination ul li a:hover,
.page.page-template-default .movie-grid-pagination ul li span:hover { border: 1px solid var(--secondary-light); }
nav.pagination .nav-links span.page-numbers,
.page.page-template-default .movie-grid-pagination ul li span { border-color: transparent; background-color: var(--black); }
nav.pagination .nav-links span.page-numbers:hover,
.page.page-template-default .movie-grid-pagination ul li span:hover { border-color: transparent; }



/* ALL ARCHIVES TEMPLATES */

h1.archive-title { font-family: var(--font-flair); transform: scaleX(0.8); transform-origin: right; letter-spacing: 0; font-size: 1.4rem; color: var(--primary-color); text-align: right; margin-top: 0; text-transform: uppercase;letter-spacing: 0; }
/* .archive-pagination { display: none; } */
#infinite-sentinel { height: 1px; }
.archive-posts { margin-bottom: 5rem; }

/* Videos */
.videos .group-me { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; align-items: start; }
.videos .video-post { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; will-change: transform; }
.videos .video-post:hover{ transform: translateY(-3px); }
.videos .video-post .video-link { display: grid; grid-template-rows: auto auto auto; gap: 1rem; text-decoration: none; padding-bottom: 1rem; height: 100%; }
.videos .video-post .video-link .video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.videos .video-post .video-link .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .3s ease, filter .3s ease; }
.videos .video-post .video-link:hover .video-thumb img { transform: scale(1.06); filter: saturate(1.1) contrast(1.05); }
.videos .video-post .video-thumb::after { content: '\25B6'; position: absolute; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--secondary-color); backdrop-filter: blur(0.5rem); font-size: 1.8rem; line-height: 1; box-shadow: 0 0.25rem 0.5rem hsl(0 0% 0% / .15); left: 50%; margin-left: -2rem; top: 50%; margin-top: -2rem; }
.videos .video-post .video-link h3 { margin: 0; font-family: var(--font-mono); letter-spacing: 0; text-transform: capitalize; font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.videos .video-post .video-link time { color: var(--secondary-color); }

/* Quotes */
.quotes #quote-random .quote-content-stub blockquote { border: 0; margin: 0; padding: 0; text-align: center; }
.quotes #quote-random .quote-content-stub blockquote:before { left: 0; }
.quotes #quote-random .quote-content-stub blockquote cite { padding: 3rem 0 0; margin: 0; }
.quotes #quote-random .quote-content-stub blockquote cite:before { left: 50%; }
.quotes a.permalink.date { display: block; border-radius: 0; padding-left: 0; padding-right: 0; margin: 4rem 0; text-align: center; border: 0; }
.quotes button { border: 0; background: var(--secondary-super-dark); border: 1px solid var(--secondary-dark); padding: 0.5rem 2rem; display: block; text-align: center; width: 100%; }
.quotes button:hover { color: var(--secondary-color); }


/* ALL DETAILS */

/* Headers */
.article-header .post-meta { display: flex; justify-content: space-between; line-height: 1; text-transform: uppercase; font-family: var(--font-mono); margin-bottom: 1.25rem; text-align: right; }
.article-header small { margin: 0; font-family: var(--font-flair); transform: scaleX(0.8); transform-origin: center; letter-spacing: 0; color: var(--secondary-color); text-align: right; margin-top: 0; text-transform: uppercase; }
.article-header small.left { transform-origin: left; }
.article-header small.center { transform-origin: center; }
.article-header small.right { transform-origin: right; }

/* Content */
figure.feat-img { margin-bottom: 5rem; }
article .article-content .the-post { margin: 3rem 0; line-height: 2rem; }
article .article-content .the-post  p:last-child { margin-bottom: 0; }

/* Related Posts */
.related-posts { margin-top: 5rem; border-top: 1px solid var(--primary-color); }
.related-posts .related-post { padding: 1rem 4rem 8rem 1rem; position: relative; }
.related-posts .related-post:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 20%; background-image: linear-gradient(to bottom, rgba(26, 0, 45, 1), rgba(26, 0, 45, 0)); }
.related-posts .related-post span.title { position: relative; z-index: 1; }


/* Countdown Item Block */
span.side-number-module { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 10px; align-items: start; margin: 5rem 0 3rem; }
span.side-number-module .numbered-hr { font-family: var(--font-mono); font-size: 1.5rem; color: var(--secondary-light); font-weight: 700; margin: 0; grid-column: 1; grid-row: 1; text-align: center; border: 1px solid var(--primary-color); height: 100%; align-content: center; border-radius: 2px; }
.side-number-module .countdown-item-description { grid-column: 1 / -1; }
span.side-number-module h2 { font-family: var(--font-mono); color: var(--secondary-color); margin: 0; }
span.side-number-module p.pre { font-size: 1.5rem; grid-column: 2; grid-row: 2; margin: 0; color: var(--mid-grey); }

/* Features */

/* Features Archive */
.single-feature header.stagg { position: absolute; top: 1rem; left: 0; right: 0; }
.features .group-me.flex-column a.card .feature-teaser .excerpt p { font-family: var(--font-italic); margin: 2rem 0; text-align: justify; letter-spacing: 0; font-weight: 700; }

/* Features Detail */
.single-feature .base-wrap { padding: 0; }
.single-feature .article-header-feature { position: relative; overflow: hidden; }
.single-feature .article-header-feature .cursive-header { font-family: var(--font-cursive); position: absolute; text-wrap-mode: nowrap; left: -50%; opacity: 0.15; font-size: 15rem; top: 20%; }
.single-feature .article-header-jr { display: flex; height: 100vh; }
.single-feature .article-header-jr .title-holder { margin: 0 1rem 1rem; align-self: end; }
.single-feature .article-header-jr .title-holder p,
.single-feature .article-header-jr .title-holder h1 { margin: 0; padding: 0.5rem; border-style: solid; border-width: 0 0 0 0.25rem; border-color: var(--secondary-color); line-height: 1; font-size: 3rem; background-color: var(--black); font-family: var(--font-mono); letter-spacing: -0.25rem; text-transform: capitalize; }
.single-feature .article-header-jr .title-holder p { display: inline-block; font-family: var(--font-thin); font-size: 2rem; background-color: var(--black); color: var(--secondary-color); letter-spacing: 0.25rem; padding-bottom: 0.25rem; text-transform: uppercase; }
.single-feature .article-content-feature { margin-bottom: 3rem; }
.single-feature .interview-box { color: var(--mid-grey); padding: 2.75rem 1rem 1.5rem; margin: -1rem 1rem 0; border-left: 4px solid var(--secondary-color); margin-top: -1rem; position: relative; z-index: 11; }
.single-feature .interview-box p { margin: 0; line-height: var(--line-height-close); }
.single-feature .interview-box .the-excerpt { margin: 0 0 2.5rem; }
.single-feature .interview-box p.interviewee { display: inline-block; color: var(--light-grey); margin-bottom: 0.5rem; }
.single-feature .interview-box span.claim { display: inline; color: var(--mid-grey); } 
.single-feature .feature-summary { font-family: var(--font-base); padding: 1rem; color: var(--secondary-color); text-align: center; }
.single-feature .feature-summary p.one-sentence-summary { color: var(--secondary-color); font-family: var(--font-mono); font-size: 1.2rem; }
.single-feature .feature-summary p.walkin { font-family: var(--font-mono); font-size: .8rem; margin: 2rem 0; color: var(--secondary-color); text-transform: uppercase; text-align: center; }
.single-feature .feature-summary p.walkin a { display: inline-block; line-height: 1.4; border: 0; }
.single-feature .the-post { padding: 0 1rem 1rem; }
.single-feature .the-post strong { font-family: var(--font-flair); letter-spacing: 0; display: inline-block; margin: 3.5rem 0 1.5rem; font-size: 1.2rem; line-height: var(--line-height-close); color: var(--secondary-light); }
/* helper */
.single-feature .rune-splitter { display: block; height: 2rem; text-align: center; margin: 1rem; }
.single-feature .rune-splitter svg { fill: var(--secondary-color); }
/* prev post next post nav for single features */
.single-feature nav.pagination-single::before { content: 'More Long Form Work'; width: 100%; font-family: var(--font-mono); color: var(--secondary-color); text-transform: uppercase; text-align: center; position: absolute; top: 0; }
.single-feature nav.pagination-single { padding-top: 3rem; }
.single-feature nav.pagination-single a { padding-top: 3rem; padding-bottom: 3rem; font-family: var(--font-thin); font-size: 3rem; letter-spacing: 1px; }
.single-feature nav.pagination-single a.previous-post { padding-left: 1rem; }
.single-feature nav.pagination-single a.next-post { justify-content: end; padding-right: 1rem; }


/* Links */
article .link-card-link { display: flex; margin: 0 -1rem 3rem; padding: 2rem 1rem; border-color: var(--black); border-width: 2px 2px 0.5rem; border-style: solid; background-image: repeating-linear-gradient(45deg, transparent 2px, rgba(20,20,20,1) 0.5rem, rgba(10,10,10,1) 0.75rem); background-color: var(--black); }
article .link-card-link > * { flex: 0 auto; }
article .link-card-link .link-content h4 { margin: 0 0 1rem; }
article .link-card-link .link-content p,
article .link-card-link .link-content small { margin: 0; color: var(--mid-grey); line-height: var(--line-height-mid); }
article .link-card-link .link-content p { font-size: 1rem; }
article .link-card-link .link-content small.link-header-more { color: var(--secondary-color); margin: 0 0 1rem; font-weight: 700; text-transform: uppercase; font-size: 1rem; }
article .link-card-link .link-content small.link-header-more::after { content: ''; }
article .link-card-link:hover { border-color: var(--primary-color); }
article .link-card-link:hover small.link-header-more { color: var(--white); }


/* Common Posts */
.single-post .article-header-post { margin-bottom: 3rem; text-align: center; }
.single-post .article-header-post h1 { margin: 1.5rem 0; }
.single-post .article-header-post .date { color: var(--secondary-color); text-align: center; }
.single-post .article-header-post a { border-color: var(--secondary-dark); color: var(--secondary-color); }
.single-post .article-header-post a:hover { color: var(--secondary-light); }
.single-post figure,
.single-post figure.wp-block-embed,
.single-post figure.wp-block-image,
.single-post figure.wp-block-video { margin: 2rem 0; }
.single-post .related-posts { text-align: center; margin-left: auto; margin-right: auto; }


/* FOOTER */

section.footer { position: sticky; z-index: 99; padding: 0.5rem; bottom: 0; left: 0; right: 0; background-color: rgba(var(--secondary-rgb), var(--opacity-light)); }
section.footer small { margin: 0; color: var(--primary-color); }










/* PORTFOLIO-SPECIFIC UPDATES */

.post-type-archive-portfolio p { line-height: 1.3; }
main aside.portfolio-sidebar { margin: 0 0 1.5rem; }
main aside.portfolio-sidebar p { margin: 0; }


body.post-type-archive-portfolio ::-moz-selection,
body.single-portfolio ::-moz-selection {background:var(--secondary-color);color:var(--light-grey);text-shadow:none}
body.post-type-archive-portfolio ::selection,
body.single-portfolio ::selection {background:var(--secondary-color);color:var(--light-grey);text-shadow:none}
body.post-type-archive-portfolio,
body.single-portfolio { font-weight: 400; font-style: normal; font-family: var(--font-base); }
body.post-type-archive-portfolio a, body.post-type-archive-portfolio a:visited,
body.single-portfolio a, body.single-portfolio a:visited { font-family:  var(--font-base); color: var(--light-grey); border-bottom: 2px solid var(--secondary-color); }
body.post-type-archive-portfolio a:hover, body.post-type-archive-portfolio a:focus,
body.single-portfolio a:hover, body.single-portfolio a:focus { color: var(--light-grey); border-color: var(--light-grey); }
body.post-type-archive-portfolio .interior-row,
body.single-portfolio .interior-row { margin-bottom: 0; }
.post-type-archive-portfolio .base-wrap,
body.single-portfolio .base-wrap { width: 100%; max-width: 100%; }

.single-portfolio figure a { border: 0; }

.header.header-portfolio,
.single .header.header-portfolio { display: block; height: 2.75rem; margin: 0 0 2rem; }
.header.header-portfolio h1,
.single .header.header-portfolio h1 { display: none; }
.header.header-portfolio .home-link,
.single .header.header-portfolio .home-link { display: inline-block; }
.header.header-portfolio .home-link svg.stagg-syndicate-logo,
.single .header.header-portfolio .home-link svg.stagg-syndicate-logo { display: block; width: 10rem; height: 2.75rem; }
.header.header-portfolio .home-link:hover svg.stagg-syndicate-logo,
.single .header.header-portfolio .home-link:hover svg.stagg-syndicate-logo { fill: var(--secondary-color); }
body.post-type-archive-portfolio h2,
body.single-portfolio h2 { background-color: var(--secondary-color); color: var(--light-grey); margin: 0 0 2rem; padding: 0.5rem 0.5rem; font-size: 1rem; line-height: 1; }

body.post-type-archive-portfolio .portfolio-intro,
body.single-portfolio .portfolio-intro { color: var(--mid-grey); }

.post-type-archive-portfolio,
.post-type-archive-portfolio small,
.single-portfolio,
.single-portfolio small { font-family: var(--font-base); }
.post-type-archive-portfolio h1,
.single-portfolio h1,
.post-type-archive-portfolio h2,
.single-portfolio h2,
.post-type-archive-portfolio h3,
.single-portfolio h3,
.post-type-archive-portfolio h4,
.single-portfolio h4,
body.post-type-archive-portfolio figure figcaption,
body.single-portfolio figure figcaption { font-family: var(--font-base); line-height: 1; }
.post-type-archive-portfolio main.primary,
.single-portfolio main.primary { padding-top: 0; }

.post-type-archive-portfolio .portfolio-posts-wrap a.portfolio-item { margin-bottom: 4rem; display: flex; flex-direction: column; align-content: space-between; gap: 1.5rem; }
.post-type-archive-portfolio .portfolio-posts-wrap a.portfolio-item:hover { border-color: var(--secondary-color); }
.post-type-archive-portfolio .portfolio-posts-wrap a.portfolio-item .port-wrapper { display: flex; flex-grow: 1; }
.post-type-archive-portfolio .portfolio-posts-wrap a.portfolio-item h4 { margin-bottom: 1rem; }
.post-type-archive-portfolio .portfolio-posts-wrap a.portfolio-item figure { padding: 0; margin: 0; display: block; width: 100%; align-self: center; }
.post-type-archive-portfolio .portfolio-posts-wrap a.portfolio-item h4 { margin: 0 0 1rem; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease; transition-timing-function: ease; }
.post-type-archive-portfolio .portfolio-posts-wrap a.portfolio-item:hover h4 { color: var(--secondary-color); }
.post-type-archive-portfolio .portfolio-posts-wrap a.portfolio-item small { margin-top: 1rem; }

.post-type-archive-portfolio .portfolio-writings a.writing-item { display: block; margin-bottom: 3rem; }
.post-type-archive-portfolio .portfolio-writings a.writing-item .cover-img { margin-bottom: 1rem; }
.post-type-archive-portfolio .portfolio-writings a.writing-item article { margin-bottom: 0.75rem; }
.post-type-archive-portfolio .portfolio-writings a.writing-item article p { margin: 0 0 0.25rem; }
.post-type-archive-portfolio .portfolio-writings a.writing-item article small { display: block; font-family: var(--font-base); margin: 0 0 1rem; }
.post-type-archive-portfolio .portfolio-writings a.writing-item:hover { border-color: var(--secondary-color); }
.post-type-archive-portfolio .portfolio-writings a.writing-item:hover article p,
.post-type-archive-portfolio .portfolio-writings a.writing-item:hover article small { color: var(--secondary-color); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } 


.single-portfolio .all-projects { display: inline-block; position: absolute; top: 1rem; right: 1rem; }
.single-portfolio .all-projects span { display: none; }

.single-portfolio main.primary { border: 0; }
.single-portfolio .wp-block-columns { gap: 0; margin: 0; }

.single-portfolio .portfolio-top { margin-bottom: 4.5rem; }
.single-portfolio .portfolio-top figure.feat-img { display: flex; justify-content: center; align-items: center; margin: 0; padding: 3rem 1.5rem; }
.single-portfolio .portfolio-top figure.feat-img span.feat-wrap { display: inline-block; width: 76%; text-align: center; }

.post-type-archive-portfolio figure.wp-block-image,
.single-portfolio figure,
.single-portfolio figure.wp-block-image,
.single-portfolio figure.wp-block-embed,
.single-portfolio figure.wp-block-video { margin: 1.5rem 0; padding: 0; border: 0; max-width: 1222px; margin: auto;  }

.single-portfolio .portfolio-top h1 { margin-bottom: 1.5rem; }
.single-portfolio .portfolio-top .portfolio-meta,
.single-portfolio .portfolio-top .portfolio-meta p { margin: 0 0 1.5rem; }
.single-portfolio .portfolio-top .portfolio-meta p:last-child { margin: 0; }
.single-portfolio .portfolio-top .portfolio-meta .client-terms,
.single-portfolio .portfolio-top .portfolio-meta .portfolio-terms { margin: 0 0 0.5rem; line-height: 1.3; }
.single-portfolio .portfolio-top .portfolio-meta .portfolio-terms { font-size: 1rem; text-transform: uppercase; padding-bottom: 1.5rem; margin-bottom: 1.5rem; }

.single-portfolio main.primary .the-post [class^="wp-block-"] { margin: 2em auto; }
.single-portfolio main.primary .the-post [class^="wp-block-"] > [class^="wp-block-"] { margin: 0 auto; }

.single-portfolio .portfolio-sidebar h2 { margin-top: 0; }
.single-portfolio .portfolio-sidebar p { margin: 1.5rem 0; }

.portfolio-footer { background-color: var(--secondary-dark); padding: 1.5rem; color: var(--secondary-color); }
.portfolio-footer .logos { text-align: center; }
.portfolio-footer .logos a { display: inline-block; border: 0; margin-bottom: 2rem; }
.portfolio-footer .logos a svg { height: 2.5rem; display: inline-block; fill: var(--secondary-color); }
.portfolio-footer .logos a:hover svg { fill: var(--mid-grey); }
.portfolio-footer .logos a:last-child svg { height: 4.5rem; }


/* Featherlight Updates */
.featherlight-next, .featherlight-previous { top: 0; }
.featherlight-next { left: 90%; }
.featherlight-previous { right: 90%; }



/* movie grid overwrites */
.page.page-template-default .movie-card { border: 1px solid var(--secondary-color); }
.page.page-template-default .movie-card .movie-details { border-top: 1px solid var(--secondary-color); background-color: var(--black); font-family: var(--font-mono); letter-spacing: 0; }
.page.page-template-default .movie-item .movie-details h3.movie-title { text-align: left; transform: none; text-transform: none; font-family: var(--font-mono); }



/* Card handling for landscape views */
@media (orientation: landscape) or (min-width: 768px) {
	
	blockquote { padding-left: 3rem; }
	figure figcaption,
	figure.wp-block-image figcaption { padding: 1rem; }
	
	header.stagg { margin-bottom: 0; }
	header.stagg .height-logo { display: none; }
	header.stagg .sidebar { display: block; }
	header.stagg .width-logo { display: flex; align-items: flex-start; }
	.base-wrap { display: flex; gap: 2rem; max-width: 40rem; margin: auto; }
	.base-wrap header.stagg { flex: 1; }
	.base-wrap .content-wrap { flex: 3; }
	.base-wrap .content-wrap main.front .card,
	.base-wrap .content-wrap main.front .card section,
	.base-wrap .content-wrap main.front.posts section { width: 100%; }
	
	
	
	/* DETAILS */
	
	/* All */
	
	.nav-wrapper { margin-top: 5rem; }

	
	/* Features */
	
	.single-feature .base-wrap { max-width: 100%; }
	/* Turn header back into the mobile header */
	.single-feature header.stagg .sidebar { display: none; }
	.single-feature header.stagg .height-logo { display: block; }
	.single-feature .article-header-jr .title-holder small { font-size: 3rem; }
	.single-feature .article-header-jr .title-holder h1 { font-size: 4rem; }
	.single-feature .interview-box { margin: -1rem 0 0 1rem; }
	
	
	/* Posts */
	
	.single-post .base-wrap { flex-direction: column; }
	.single-post header.stagg .height-logo { display: block; }
	.single-post header.stagg .sidebar { display: none; }
	
	
}

/* adjust for landscape iPhones to only show headers for easier browsing */
@media (orientation: landscape) and (max-height: 430px) {
	main.front .card { aspect-ratio: unset; }
	main.front .card section.upper p { display: none; }
	main.front .card section.upper h2,
	main.front .card.bio section.upper p { margin: 1rem 0; }
	main.front .card.bio section.upper p { display: block; }
	main.front .card.tbo section.upper h4,
	main.front .card.tbo section.upper label { display: none; }
}


/* typical widescreen adjustments */
@media only screen and (min-width: 782px) {
	
	header.stagg .sidebar .width-logo .cell { width: 4rem; }
	
	figure.wp-block-image,
	.wp-block-image { margin: 3rem 0; width: 100%; }
	figure figcaption,
	figure.wp-block-image figcaption { margin: 0; }
	figure :where(figcaption),
	figure.wp-block-embed :where(figcaption),
	figure.wp-block-image :where(figcaption),
	figure.wp-block-video :where(figcaption) { margin-top: 1rem; } /* have to override a default WP style */
	
	h1, h2, h3, h4 { font-size: 3.5rem; margin: 6rem 0 1.5rem; }
	h2 { font-size: 3rem; }
	h3 { font-size: 2.5rem; }
	h4 { font-size: 2rem; }
	
	p, ul, ol, dl, dd, hr { margin: 3rem 0; }
	
	nav.pagination-single a { transition: all 1s; }
	nav.pagination-single a:hover { filter: grayscale(1); }
	
	.meta,
	.article-header small.meta { font-size: 1.3rem; }
	
	/* HOME PAGE UPDATES */
	
	/* Features */
	.features .group-me.flex-column { flex-direction: column; }
	.features .group-me.flex-column a.card .feature-subject { position: relative; }
	.features .group-me.flex-column a.card .feature-subject small.subject-tag { position: absolute; bottom: 0; left: 0; rotate: -90deg; transform-origin: top left; font-size: 6rem; transform: translateX(-5rem); }
	.features .group-me.flex-column a.card .feature-teaser { padding-top: 1rem; }
	.features .group-me.flex-column a.card .feature-teaser h2 { margin: 0; padding: 0; font-family: var(--font-mono); font-size: 4rem; text-transform: none; letter-spacing: -3px; background-color: transparent; font-size: 2.5rem; }
	.features .group-me.flex-column a.card .feature-teaser small { color: var(--white); letter-spacing: -1px; background-color: var(--secondary-dark); padding: 0.05rem 1rem; }
	.features .group-me.flex-column a.card .feature-teaser .excerpt p { font-size: 0.9rem; }
	
	/* Links */
	.link-post {
		width: 100%;
		transform-origin: right center;
		--norm: 0;
		--abs: max(var(--norm), calc(-1 * var(--norm)));
		--scale: clamp(0.85, calc(1.20 - var(--abs) * 0.35), 1.25);
		will-change: transform;
		transform: translateZ(0) scale(var(--scale));
	}
	.link-post a.link-card-link { box-shadow: -1rem -1rem 2rem var(--black); }
	
	
	/* ALL DETAILS */
	
	/* Content */
	.single-feature figure,
	.single-feature figure.wp-block-embed,
	.single-feature figure.wp-block-image,
	.single-feature figure.wp-block-video,
	.single-post figure,
	.single-post figure.wp-block-embed,
	.single-post figure.wp-block-image,
	.single-post figure.wp-block-video { margin: 4rem -5rem 2rem; width: calc(100% + 10rem); border: 1px solid var(--secondary-dark); }
	.single-feature figure.wp-block-embed,
	.single-post figure.wp-block-embed { border: 1px solid var(--secondary-dark); padding: 0.5rem; }
	/* undo twitter settings */
	.single-post figure.wp-block-embed.wp-block-embed-twitter { border: 0; width: auto; padding: 0; }
	.single-post figure.wp-block-embed.wp-block-embed-twitter .twitter-tweet { margin: 0 auto; }

	/* Features */
	
	.single-feature .interview-box { padding-right: 7.5rem; }
	.single-feature .article-feature-content { margin: 0 auto; }
	.single-feature nav.pagination-single a { padding: 3rem; }
	
	/* Common Posts */
	
	.single-post figure img { width: 100%; }
	.related-posts { margin-top: 10rem; }

	/* movie grid overwrites */
	.page.page-template-default h1 { margin-top: 0; }
	
	
	/* ALL ARCHIVES */
	
	/* Links */
	
	.archive .link-post { transform: none; }
	.post-type-archive-link .links .group-me { gap: 2rem; }
	
	/* Quotes */
	.post-type-archive-quote .quotes { width: 70%; }
	.quotes #quote-random .quote-content-stub blockquote { text-align: left; }
	.quotes #quote-random .quote-content-stub blockquote,
	.quotes #quote-random .quote-content-stub blockquote p { font-size: 2rem; }
	.quotes #quote-random .quote-content-stub blockquote cite,
	.quotes #quote-random .quote-content-stub .wp-block-quote cite,
	.quotes #quote-random .quote-content-stub .wp-block-quote footer { padding-top: 0; padding-left: 1.5rem; font-size: 1.25rem; }
	.quotes #quote-random .quote-content-stub blockquote cite em { font-size: 1.25rem; }
	.quotes #quote-random .quote-content-stub blockquote cite:before { left: 0; }
	.quotes button { display: inline-block; width: auto; margin: auto; text-align: left; cursor: pointer; }
	.quotes a.permalink.date { text-align: left; }
	
	
	
	
	/* PORTFOLIO-SPECIFIC UPDATES */
	.single-portfolio .all-projects { position: relative; top: auto; right: auto; font-size: inherit; margin-bottom: 1.5rem; }
	.single-portfolio .all-projects span { display: inline; }
	
	.post-type-archive-portfolio .row { margin-bottom: 0; }
	.post-type-archive-portfolio .column,
	.single-portfolio .column { margin: 0; }
	.post-type-archive-portfolio aside.portfolio-sidebar { width: 100%; max-width: 320px; }
	.single-portfolio .wp-block-columns { gap: 2em; }
	
	.post-type-archive-portfolio .row { column-gap: 1rem; }
	.post-type-archive-portfolio .row .column { flex-direction: column; flex-basis: 100%; flex: 1; }
	.post-type-archive-portfolio .row .column.portfolio-posts-wrap { flex: 3; flex-direction: row; }
	
	.post-type-archive-portfolio main.primary { border-width: 0; }
	.post-type-archive-portfolio main.primary .portfolio-picker::before { display: inline-block; content: 'View Only: '; }
	.post-type-archive-portfolio main.primary .portfolio-posts-wrap,
	.post-type-archive-portfolio .portfolio-intro { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem 1rem; }
	.post-type-archive-portfolio a.portfolio-item { width: calc(50% - 0.5rem); }
	.post-type-archive-portfolio .portfolio-posts-wrap a.portfolio-item figure { border: 0; }
	
	.single-portfolio .portfolio-top { margin-bottom: 8rem; }
	.single-portfolio .portfolio-top .portfolio-meta .portolio-meta-header { flex: 1; }
	.single-portfolio .portfolio-top .portfolio-meta .portfolio-description { flex: 2; }
	.single-portfolio .portfolio-top figure.feat-img { min-height: 100vh; max-width: 100%; padding: 8rem 1.5rem; }
	
	.portfolio-footer p { text-align: center; }
	.portfolio-footer .logos a { margin-bottom: 0; }
	
	
}


/* small desktops */
@media only screen and (min-width: 1024px) {
		
	.base-wrap { max-width: none; gap: 5rem; }
	.base-wrap header.stagg,
	.base-wrap .content-wrap { flex: initial; z-index: 22; }
	.base-wrap .content-wrap { display: flex; flex-direction: column; }
	main.front.evergreen { flex-direction: row; gap: 0.5rem; }
	.group-me { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
	.group-me a.card { flex: 0 0 calc(50% - 0.5rem); }
	
	
	/* HOME PAGE UPDATES */
	section h3 { font-size: 2rem; }
	.links .group-me { gap: 3rem; }
	
	
	/* DETAILS */
	
	/* Features */
	.single-feature header.stagg { z-index: 19; }
	.features .group-me.flex-column a.card { flex: 1; aspect-ratio: 2/1; justify-content: center; display: grid; grid-template-columns: 1fr 1fr; }
	.features .group-me.flex-column a.card:hover { border-color: 1px solid var(--secondary-color); }
	.single-feature .article-header-feature .cursive-header { font-size: 40rem; top: auto; }
	.single-feature .article-header-feature .interview-box { margin-left: 1rem; padding-right: 0; width: 65%; }
	.single-feature .article-content-feature { width: 50%; margin: 0 auto 3rem; }
	
	/* Common Posts */
	.single-post article.post { width: 80%; margin: auto; }
	.single-post .article-header-post { max-width: 50rem; margin: 5rem auto; }
	.single-post .article-header-post h1 { margin-top: 2rem; }
	.single-post .base-wrap main .article-header-post .post-meta,
	.single-post .base-wrap main .article-header-post h1,
	.single-post .base-wrap main .article-content-post { width: 100%; max-width: 100%; }
	.single-post .base-wrap main .article-content-post { width: 60%; margin: auto; }
	
	/* Movie Grid Overrides */
	.page.page-template-default .movie-item .movie-details h3 { font-size: 1.5rem; }
	.page.page-template-default .movie-item .movie-details .movie-meta { font-size: 1.3rem; }
	
	
	
	/* ARCHIVES */
	
	/* Videos */
	.videos .video-post .video-link { grid-template-rows: 1fr 1fr auto; }
	.videos .video-post { height: 100%; }

}

/* iPhone 11 portrait */
@media only screen and (min-width: 1242px) {
	
	.base-wrap {  }
	.primary { flex: 4; }
	
	
	/* DETAILS */
	
	/* All */
	
	h1 { font-size: 5rem; }
	
	.base-wrap main { max-width: 70rem; }
	
	.base-wrap main .article-header .post-meta,
	.base-wrap main .article-header h1,
	.base-wrap main .article-content,
	.single-video .content-wrapper,
	.related-posts { max-width: 70%; }
	.single-video .base-wrap .article-header .meta.title,
	.single-quote .base-wrap .article-header .meta.title { max-width: 70%; text-align: left; }
	.single-video .base-wrap main .article-content { max-width: 100%; }
	.base-wrap main .article-header h1 { font-size: 5rem; }
	
	/* Overwrite some home page widths */
	.base-wrap main.front .video .article-header .post-meta { width: 100%; max-width: 100%; margin: 0; }
	.base-wrap main.front .video figure { margin: 0; }
	
	/* Features */
	
	.single-feature .base-wrap { width: 100%; max-width: 100%; }
	.features .group-me.flex-column a.card .feature-teaser h2 { font-size: 4rem; }
	.features .group-me.flex-column a.card .feature-teaser .excerpt p { font-size: 1rem; }
	.single-feature .article-header-feature { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 6rem; position: relative; overflow: hidden; }
	.single-feature .article-header-feature::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; filter: grayscale(100%) blur(2px) brightness(0.5); background-size: cover; background-position: top right; z-index: -1; opacity: 0.4; }
	.single-feature .article-header-feature .interview-box { display: grid; align-content: center; margin-left: 0; }
	.single-feature .article-header-feature .article-header-jr { background-position: top left; }
	.single-feature .article-header-feature .article-header-jr .title-holder { align-self: center; }
	
	.base-wrap main { max-width: none; }
	.base-wrap main .article-header-feature .post-meta,
	.base-wrap main .article-header-feature h1,
	.base-wrap main .article-content-content { max-width: 100%; }

	
	/* Common Posts */
	
	.single-post figure.feat-img { width: 80%; margin-left: auto; margin-right: auto; }
	
	
	
	/* PORTFOLIO UPDATES */
	.single-portfolio .portfolio-top { margin-left: -0.5rem; width: calc(100% + 1rem); }
	.single-portfolio .portfolio-top .portfolio-meta { max-width: 1222px; margin: 8rem auto 1.5rem; display: flex; gap: 2.5rem; }
	.single-portfolio .portfolio-top .portolio-meta-header {  }
	.single-portfolio .portfolio-top .portolio-meta-header h1 { margin-top: 0; }
	.single-portfolio .portfolio-top .portfolio-description {  }
	
}