/* ==================================================
   SOURCE: css/components.css
   ================================================== */


/* MARK THOMAS FILMS — REUSABLE COMPONENTS */

.mtf-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 25px;
  border: 1px solid currentColor;
  border-radius: var(--mtf-radius);
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: opacity 180ms ease;
}

.mtf-button--primary {
  border-color: var(--mtf-color-dark);
  background: var(--mtf-color-dark);
  color: #fff;
}

.mtf-section--dark .mtf-button--primary {
  border-color: #fff;
  background: #fff;
  color: var(--mtf-color-dark);
}

@media (hover: hover) {
  .mtf-button:hover {
    opacity: 0.8;
  }
}

.mtf-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.mtf-cta {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.mtf-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .mtf-button {
    transition: none;
  }
}


/* ==========================================================
   LINKS — SHARED ARROW LINK

   Global text CTA used by Related Films and shared footers.
   Underline animates on the label only; the arrow slides right.
   Section-specific styles control placement, not appearance.
   ========================================================== */

a.mtf-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-size: 0.81rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.025em;
  text-decoration: none;
}

a.mtf-arrow-link:hover,
a.mtf-arrow-link:focus-visible {
  text-decoration: none;
}

/* Animate the text underline independently of the arrow. */

.mtf-arrow-link__label {
  position: relative;
  display: inline-block;
}

.mtf-arrow-link__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms ease-in-out;
}

.mtf-arrow-link:hover .mtf-arrow-link__label::after,
.mtf-arrow-link:focus-visible .mtf-arrow-link__label::after {
  transform: scaleX(1);
}

/* Give the arrow its own animation, with no underline. */

.mtf-arrow-link__arrow {
  display: inline-block;
  flex: none;
  transition: transform 250ms ease;
}

.mtf-arrow-link:hover .mtf-arrow-link__arrow,
.mtf-arrow-link:focus-visible .mtf-arrow-link__arrow {
  transform: translateX(5px);
}

/* Keyboard accessibility */

a.mtf-arrow-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
  .mtf-arrow-link__label::after,
  .mtf-arrow-link__arrow {
    transition: none;
  }
}


/* !START MARK CODE */
/* THIS IS MARK's CSS FROM HIS CODE BLOCK ORIGINALLY */

/* ==========================================================
   MARK THOMAS FILMS
   CONTACT PAGE + NATIVE SQUARESPACE SPLIT QUOTE HANDOFF
   ========================================================== */

.mtf-contact-intro,
.mtf-native-contact-wrapper,
.mtf-quote-linked-panel {
  --mtf-paper: #f5f5f5;
  --mtf-panel: #e8e8e8;
  --mtf-white: #ffffff;
  --mtf-ink: #2d2d2d;
  --mtf-muted: #797979;
  --mtf-line: #c8c8c8;
}

/* Make First Name and Last Name bold like other labels */

.caption-text {
  font-weight: 600;
}

/* INTRO — presentation only; quote/VSCO bridge logic below is unchanged */

.mtf-contact-intro {
  width: 100%;
  margin: 12px 0 12px;
  padding: 28px;
  box-sizing: border-box;
  background: var(--mtf-paper);
  border: none;
  border-radius: 10px;
  color: var(--mtf-ink);
  font-family: inherit;
  text-align: center;
}

.mtf-contact-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mtf-muted);
}

.mtf-contact-intro h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  font-weight: 500;
  color: var(--mtf-ink);
}

.mtf-contact-intro p {
  max-width: 760px;
  margin: 0 auto 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--mtf-muted);
}

.mtf-contact-inline-link {
  color: var(--mtf-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.mtf-contact-inline-link:hover {
  opacity: .72;
}

.mtf-contact-quote-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  box-sizing: border-box;
  background: var(--mtf-ink);
  color: #fff;
  border: 1px solid var(--mtf-ink);
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: opacity .2s ease, transform .2s ease;
}

.mtf-contact-quote-button:hover {
  opacity: .88;
}

.mtf-contact-quote-button:active {
  transform: translateY(1px);
}

/* FORM OUTER CARD */

.mtf-native-contact-wrapper {
  width: 100%;
  margin: 0;
  padding: 28px;
  box-sizing: border-box;
  background: var(--mtf-paper);
  border: 1px solid var(--mtf-line);
  border-radius: 10px;
  box-shadow: none;
}

.mtf-native-contact-wrapper form {
  margin: 0;
}

.mtf-native-contact-wrapper .field-list,
.mtf-native-contact-wrapper .fields {
  margin: 0;
}

/* LABELS */

.mtf-native-contact-wrapper label,
.mtf-native-contact-wrapper .title,
.mtf-native-contact-wrapper legend {
  color: var(--mtf-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.mtf-native-contact-wrapper .required,
.mtf-native-contact-wrapper .description {
  color: var(--mtf-muted);
  font-size: 12px;
  font-weight: 400;
}

/* INPUTS */

.mtf-native-contact-wrapper input[type="text"],
.mtf-native-contact-wrapper input[type="email"],
.mtf-native-contact-wrapper input[type="tel"],
.mtf-native-contact-wrapper input[type="date"],
.mtf-native-contact-wrapper input[type="number"],
.mtf-native-contact-wrapper input[type="url"],
.mtf-native-contact-wrapper select,
.mtf-native-contact-wrapper textarea {
  width: 100%;
  min-height: 48px;
  margin-top: 7px;
  padding: 11px 13px;
  box-sizing: border-box;
  background: var(--mtf-white);
  color: var(--mtf-ink);
  border: 1px solid var(--mtf-line);
  border-radius: 6px;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.mtf-native-contact-wrapper input {
  accent-color: var(--mtf-ink);
}

.mtf-native-contact-wrapper textarea {
  min-height: 150px;
  resize: vertical;
}

.mtf-native-contact-wrapper input:focus,
.mtf-native-contact-wrapper select:focus,
.mtf-native-contact-wrapper textarea:focus {
  outline: none;
  border-color: var(--mtf-ink);
  box-shadow: 0 0 0 2px rgba(45,45,45,.08);
}

.mtf-native-contact-wrapper select {
  cursor: pointer;
}

/* WEDDING DATE */

.mtf-wedding-date-field {
  margin: -4px -8px 24px;
  padding: 16px 8px 18px;
  background: var(--mtf-panel);
  border-radius: 7px;
}

/* QUOTE LINKED CONFIRMATION */

.mtf-quote-linked-panel {
  margin: 0 0 22px;
  padding: 16px 18px;
  box-sizing: border-box;
  background: var(--mtf-white);
  border: 1px solid var(--mtf-line);
  border-radius: 7px;
  color: var(--mtf-ink);
}

.mtf-quote-linked-panel strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.mtf-quote-linked-panel span {
  display: block;
  color: var(--mtf-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* If the old Squarespace upload field still exists while you are changing the form, hide it on /contact. */

.mtf-old-quote-upload-field {
  display: none;
}

/* SUBMIT */

.mtf-native-contact-wrapper input[type="submit"],
.mtf-native-contact-wrapper button[type="submit"] {
  min-height: 48px;
  padding: 13px 24px;
  background: var(--mtf-ink);
  color: #fff;
  border: 1px solid var(--mtf-ink);
  border-radius: 6px;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}

.mtf-native-contact-wrapper input[type="submit"]:hover,
.mtf-native-contact-wrapper button[type="submit"]:hover {
  opacity: .88;
}

.mtf-native-contact-wrapper input[type="submit"]:active,
.mtf-native-contact-wrapper button[type="submit"]:active {
  transform: translateY(1px);
}

.mtf-quote-linked-panel {
  scroll-margin-top: 42px;
}

/* ==========================================================
   LIVE CONTACT GAP FIX — FOOTER SAFE

   Pulls the native Squarespace form upward only when the live
   page leaves extra Fluid Engine space below the intro block.
   Does not change form fields, submission, quote data, or bridge logic.
   ========================================================== */

.mtf-contact-form-grid-fix {
  position: relative;
}

@media (max-width: 700px) {
  .mtf-contact-intro,
  .mtf-native-contact-wrapper {
    padding: 20px;
  }

  .mtf-contact-intro {
    margin: 10px 0 10px;
  }

  .mtf-contact-quote-button {
    width: 100%;
  }

  .mtf-native-contact-wrapper input[type="submit"],
  .mtf-native-contact-wrapper button[type="submit"] {
    width: 100%;
  }
}

.sqs-edit-mode .mtf-native-contact-wrapper {
  min-height: 100px;
}

/* END OF MARK'S CSS FROM CODE BLOCK - MY REPLACEMENT CODE AFTER */
/* !END MARK CODE */


.mtf-contact-intro {
  width: 100%;
  margin: 60px 0;
  padding: 66px;
  box-sizing: border-box;
  background: var(--mtf-paper);
  border: none;
  border-radius: 50px 10px;
  color: var(--mtf-ink);
  font-family: inherit;
  text-align: center;
  filter: drop-shadow(3px 3px 0px #bbb);
}

form.react-form-contents {
  padding-bottom: 60px;
}

/* ==================================================
   SOURCE: css/films-detail-header.css
   ================================================== */


/* =========================================================
   MARK THOMAS FILMS — INDIVIDUAL FILM HEADER

   Early title styling, reserved breadcrumb space
   and native tag-cloud concealment.
   ========================================================= */


/* =========================================================
   ARTICLE SPACING
   ========================================================= */

html.mtf-film-detail-page
article:has(.blog-item-top-wrapper) {
  padding-top: 0;
}


/* =========================================================
   HEADER CONTAINER

   Apply final positioning to the native Squarespace
   header, before JavaScript adds its custom class.
   ========================================================= */

html.mtf-film-detail-page .blog-item-top-wrapper {
  box-sizing: border-box;
  width: calc(100% - 44px);
  max-width: var(--mtf-content-width, 1180px);
  margin: 0 auto 20px;
  padding: 0;
  text-align: center;
}


/* Hide Squarespace's original header metadata early. */

html.mtf-film-detail-page
.blog-item-top-wrapper
.blog-item-meta-wrapper,

html.mtf-film-detail-page
.blog-item-top-wrapper
.blog-meta-item--categories {
  display: none;
}


/* =========================================================
   BREADCRUMB SPACE

   Draw the charcoal bar immediately. When JavaScript
   inserts the real breadcrumbs, this placeholder
   disappears without retaining extra space.
   ========================================================= */

html.mtf-film-detail-page
.blog-item-top-wrapper:not(
  :has(.mtf-film-detail__breadcrumbs)
)::before {
  content: "";
  position: relative;
  left: 50%;
  display: block;
  box-sizing: border-box;
  width: 100vw;
  min-height: 36px;
  margin: 0 0 20px;
  background: #373737;
  transform: translateX(-50%);
}


/* =========================================================
   ACTUAL BREADCRUMB BAR
   ========================================================= */

html.mtf-film-detail-page
.blog-item-top-wrapper
.mtf-film-detail__breadcrumbs {
  position: relative;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px clamp(12px, 1.8vw, 28px);

  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  min-height: 36px;
  margin: 0 0 20px;
  padding: 7px 20px;

  transform: translateX(-50%);

  background: #373737;
  color: #f4f4f4;

  font-family: inherit;
  font-size: .66rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
}


/* NAVIGATE TO LABEL */

.mtf-film-detail__crumb-label {
  flex: 0 0 auto;
  color: #dedede;
  white-space: nowrap;
}


/* BREADCRUMB LIST */

.mtf-film-detail__crumb-list {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;

  margin: 0;
  padding: 0;
  list-style: none;
}

.mtf-film-detail__crumb {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}


/* SEPARATORS */

.mtf-film-detail__crumb-separator {
  display: inline-block;
  margin: 0 clamp(9px, 1.25vw, 20px);
  color: #c8c8c8;

  font-size: 1.2em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}


/* BREADCRUMB LINKS — NO UNDERLINES */

html.mtf-film-detail-page
.blog-item-top-wrapper
.mtf-film-detail__crumb-link {
  color: #ededed;
  text-decoration: none;
  border: 0;
  opacity: .85;
  transition: opacity 200ms ease;
}

html.mtf-film-detail-page
.blog-item-top-wrapper
.mtf-film-detail__crumb-link:hover,

html.mtf-film-detail-page
.blog-item-top-wrapper
.mtf-film-detail__crumb-link:focus-visible {
  color: #fff;
  opacity: 1;
  text-decoration: none;
}

html.mtf-film-detail-page
.blog-item-top-wrapper
.mtf-film-detail__crumb-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}


/* CURRENT FILM */

.mtf-film-detail__crumb-current {
  color: #fff;
  font-weight: 700;
  letter-spacing: .18em;
}


/* =========================================================
   COUPLE'S TITLE

   Important: this targets the ORIGINAL Squarespace H1,
   so the title does not have to wait for JavaScript.
   ========================================================= */

html.mtf-film-detail-page
.blog-item-title >
h1.entry-title.entry-title--large {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;

  color: var(--mtf-section-text, #1b1b1b);
  font-family: inherit;
  font-weight: 400;
  line-height: 1.09;
  letter-spacing: -.025em;
  text-transform: none;
  overflow-wrap: break-word;
}


/* =========================================================
   LOCATION SUBTITLE

   Reserve its space until JavaScript inserts the
   venue and location beneath the couple's name.
   ========================================================= */

html.mtf-film-detail-page
.blog-item-title:not(
  :has(.mtf-film-detail__subtitle)
) {
  padding-bottom: calc(4px + 1.5 * .72rem);
}

html.mtf-film-detail-page
.blog-item-top-wrapper
.mtf-film-detail__subtitle {
  max-width: 100%;
  margin: 4px auto 0;
  padding: 0;

  color: inherit;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}


/* Hide original Squarespace tags on film detail pages. */

html.mtf-film-detail-page
.blog-meta-item--tags {
  display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  html.mtf-film-detail-page
  .blog-item-top-wrapper {
    width: calc(100% - 36px);
  }

  html.mtf-film-detail-page
  .blog-item-top-wrapper:not(
    :has(.mtf-film-detail__breadcrumbs)
  )::before {
    min-height: 48px;
  }

  html.mtf-film-detail-page
  .blog-item-top-wrapper
  .mtf-film-detail__breadcrumbs {
    min-height: 48px;
    gap: 3px 10px;
    padding: 8px 14px;
    font-size: .6rem;
    letter-spacing: .13em;
  }

  .mtf-film-detail__crumb-separator {
    margin: 0 7px;
  }

  html.mtf-film-detail-page
  .blog-item-top-wrapper
  .mtf-film-detail__subtitle {
    font-size: .7rem;
    line-height: 1.55;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html.mtf-film-detail-page
  .blog-item-top-wrapper
  .mtf-film-detail__crumb-link {
    transition: none;
  }

}


/* =========================================================
   FILM ARCHIVES — HIDE THE ORIGINAL TAG CLOUD

   The existing films-browser.js can still read the
   hidden links and construct our custom dropdowns.
   ========================================================= */

html.mtf-film-archive-page
section:has(
  .sqs-block-tagcloud a[href*="/films/tag/"]
):not(
  :has(.blog-basic-grid.collection-content-wrapper)
) {
  display: none;
}

html.mtf-film-archive-page
.sqs-block-tagcloud:has(
  a[href*="/films/tag/"]
) {
  display: none;
}


/* ==================================================
   SOURCE: css/films-related.css
   ================================================== */


/* =========================================================
	 MARK THOMAS FILMS — CONTINUOUS RELATED FILMS CAROUSEL

	 Center cards and faded previews share the same track.
	 ========================================================= */

.mtf-related-films {
	--mtf-related-gap: clamp(24px, 3.5vw, 56px);
	--mtf-related-transition:
		520ms cubic-bezier(.22, .61, .36, 1);

	overflow-x: clip;
}

.mtf-related-films .mtf-related-films__container {
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
}

/* HEADING */

.mtf-related-films .mtf-related-films__heading {
	max-width: 860px;
	margin: 0 auto clamp(20px, 2.6vw, 34px);
	text-align: center;
}

.mtf-related-films
.mtf-related-films__heading
.mtf-section__eyebrow {
	margin: 0 0 4px;
	line-height: 1.3;
}

.mtf-related-films
.mtf-related-films__heading
.mtf-section__title {
	margin: 0;
	line-height: 1.17;
}

.mtf-related-films__venue-count {
	margin: 9px 0 0;
	color: var(--mtf-section-muted, #777);
	font-size: .84rem;
	line-height: 1.5;
	letter-spacing: .025em;
}

/* STAGE AND MOVING TRACK */

.mtf-related-films__stage {
	position: relative;
	width: min(100%, 1360px, calc(100vw - 288px));
	margin-inline: auto;

	--mtf-related-side-space: 140px;
	--mtf-related-card-image-height: 340px;
}

.mtf-related-films__carousel {
	position: relative;
}

.mtf-related-films__viewport {
	position: relative;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	transition: height var(--mtf-related-transition);
}

.mtf-related-films__viewport.is-dragging {
	cursor: grabbing;
}

.mtf-related-films__track {
	display: flex;
	align-items: flex-start;
	gap: var(--mtf-related-gap);
	width: max-content;
	padding: 8px 0 16px;
	will-change: transform;
	transition: transform var(--mtf-related-transition);
	user-select: none;
	-webkit-user-select: none;
}

/* CARD STATES */

.mtf-related-film {
	flex: 0 0 var(--mtf-related-card-width, 500px);
	box-sizing: border-box;
	min-width: 0;
	opacity: 0;
	transform: translateY(0);

	transition:
		opacity var(--mtf-related-transition),
		transform .35s ease;
}

.mtf-related-film.is-active {
	opacity: 1;
}

.mtf-related-film.is-preview {
	opacity: .36;
	pointer-events: none;
}

.mtf-related-film.is-offstage {
	opacity: 0;
	pointer-events: none;
}

.mtf-related-film.is-preview .mtf-related-film__body {
	opacity: 0;
}

/* CARD IMAGE */

.mtf-related-film__media {
	display: block;
	width: 100%;
	border-radius: var(--mtf-radius, 5px);
	color: inherit;
	text-decoration: none;
	-webkit-user-drag: none;
}

.mtf-related-film__image-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--mtf-radius, 5px);
	background: var(--mtf-color-faint, #dedede);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
	transition: box-shadow .35s ease;
}

/* Match the main Films-page hover lift and shadow. */

@media (hover: hover) {

	.mtf-related-film.is-active:hover {
		transform: translateY(-4px);
	}

	.mtf-related-film.is-active:hover
	.mtf-related-film__image-frame {
		box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
	}
}

.mtf-related-film.is-active:focus-within {
	transform: translateY(-4px);
}

.mtf-related-film.is-active:focus-within
.mtf-related-film__image-frame {
	box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
}

.mtf-related-film__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
	pointer-events: none;
	-webkit-user-drag: none;
}

.mtf-related-film__image-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #e9e9e9, #dedede);
}

.mtf-related-film__image[hidden],
.mtf-related-film__image-placeholder[hidden] {
	display: none;
}

.mtf-related-film__image-frame--empty {
	background: var(--mtf-color-faint, #dedede);
}

/* CENTERED CARD TEXT */

.mtf-related-film__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(13px, 1.6vw, 20px) 6px 0;
	text-align: center;
	opacity: 1;
	transition: opacity 280ms ease;
}

.mtf-related-film__title {
	margin: 0;
	color: var(--mtf-section-text, #1a1a1a);
	font-size: clamp(1.25rem, 1.7vw, 1.65rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.015em;
}

.mtf-related-film__title a,
.mtf-related-film__meta-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
}

.mtf-related-film__title a:hover,
.mtf-related-film__title a:focus-visible,
.mtf-related-film__meta-link:hover,
.mtf-related-film__meta-link:focus-visible {
	text-decoration: none;
	opacity: .64;
}

.mtf-related-film__meta {
	margin: 6px 0 0;
	color: var(--mtf-section-muted, #777);
	font-size: .7rem;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: .065em;
	text-transform: uppercase;
}

.mtf-related-film__meta-separator {
	color: var(--mtf-section-rule, #c8c8c8);
}

/* PREVIOUS AND NEXT BUTTONS */

.mtf-related-films__navigation {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mtf-related-films__nav-button {
	position: absolute;
	top: calc(8px + var(--mtf-related-card-image-height) / 2);
	z-index: 3;
	display: grid;
	place-items: center;

	width: 54px;
	height: 54px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;

	background: #fff;
	color: var(--mtf-section-text, #1a1a1a);
	box-shadow: 0 5px 18px rgba(0, 0, 0, .09);

	font: inherit;
	font-size: 1.55rem;
	font-weight: 400;
	line-height: 1;

	transform: translateY(-50%);

	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		opacity 180ms ease;

	cursor: pointer;
	pointer-events: auto;
}

.mtf-related-films__nav-button--prev {
	left: calc(var(--mtf-related-side-space) * -.5 - 27px);
}

.mtf-related-films__nav-button--next {
	right: calc(var(--mtf-related-side-space) * -.5 - 27px);
}

.mtf-related-films__nav-button:not(:disabled):hover,
.mtf-related-films__nav-button:focus-visible {
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.mtf-related-films__nav-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.mtf-related-films__nav-button:disabled {
	cursor: default;
	opacity: .25;
}

/* Hide unavailable arrows on wide desktop. */

@media (min-width: 1121px) {
	.mtf-related-films__nav-button.is-unavailable {
		opacity: 0;
		pointer-events: none;
	}
}

/* PROGRESS BAR AND COUNT */

.mtf-related-films__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-top: clamp(8px, 1.2vw, 18px);
}

.mtf-related-films__progress {
	position: relative;
	width: min(100%, 430px);
	height: 20px;
	touch-action: none;
	cursor: ew-resize;
}

.mtf-related-films__progress-track,
.mtf-related-films__progress-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	border-radius: 100px;
	transform: translateY(-50%);
}

.mtf-related-films__progress-track {
	left: 0;
	right: 0;
	background: var(--mtf-section-rule, #dadada);
}

.mtf-related-films__progress-fill {
	background: var(--mtf-section-text, #353535);
	transition:
		left var(--mtf-related-transition),
		width var(--mtf-related-transition);
}

.mtf-related-films__progress.is-dragging
.mtf-related-films__progress-fill {
	transition: none;
}

.mtf-related-films__progress:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.mtf-related-films__count {
	margin: 0;
	color: var(--mtf-section-muted, #777);
	font-size: .8rem;
	line-height: 1.4;
	letter-spacing: .04em;
	white-space: nowrap;
}

/* EXPLORE ALL WEDDING FILMS — NO ARROW */

.mtf-related-films__footer {
	margin-top: clamp(10px, 1.5vw, 20px);
	text-align: center;
}

.mtf-related-films__all-link {
	display: inline-block;
	color: var(--mtf-section-text, #1a1a1a);
	font-size: .83rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .015em;
	text-decoration: none;
}

.mtf-related-films__all-link:hover,
.mtf-related-films__all-link:focus-visible {
	text-decoration: none;
	opacity: .66;
}

.mtf-related-films a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* SINGLE FILM */

.mtf-related-films--single .mtf-related-films__stage {
	width: min(100%, 650px);
}

.mtf-related-films--single .mtf-related-films__navigation,
.mtf-related-films--single .mtf-related-films__controls {
	display: none;
}

/* TABLETS AND NARROW DESKTOPS */

@media (max-width: 1120px) {

	.mtf-related-films__stage {
		width: 100%;
	}

	.mtf-related-films__viewport {
		left: 0;
		width: 100%;
		transform: none;
	}

	.mtf-related-films__navigation {
		position: relative;
		inset: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin-top: 10px;
	}

	.mtf-related-films__nav-button,
	.mtf-related-films__nav-button--prev,
	.mtf-related-films__nav-button--next {
		position: static;
		width: 44px;
		height: 44px;
		font-size: 1.3rem;
		transform: none;
	}

	.mtf-related-films__nav-button:not(:disabled):hover,
	.mtf-related-films__nav-button:focus-visible {
		transform: scale(1.04);
	}

	.mtf-related-films__controls {
		margin-top: 10px;
	}
}

/* PHONES */

@media (max-width: 767px) {

	.mtf-related-films__stage {
		width: 100%;
	}

	.mtf-related-films__progress {
		width: min(100%, 290px);
	}

	.mtf-related-films__count {
		font-size: .76rem;
	}

	.mtf-related-films .mtf-related-films__heading {
		margin-bottom: 20px;
	}
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

	.mtf-related-films__viewport,
	.mtf-related-films__track,
	.mtf-related-film,
	.mtf-related-film__body,
	.mtf-related-film__image-frame,
	.mtf-related-films__nav-button,
	.mtf-related-films__progress-fill {
		transition: none;
	}
}


/* ==================================================
   SOURCE: css/films-retired.css
   ================================================== */


/* =========================================================
	 MARK THOMAS FILMS — RETIRED WEDDING FILMS
	 ========================================================= */

.mtf-retired-film {
	width: 100%;
	overflow: hidden;
	background: #111;
}

.mtf-retired-film__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
}

.mtf-retired-film__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtf-retired-film__message {
	box-sizing: border-box;
	padding: 34px 30px 38px;
	background: #111;
	color: #fff;
	text-align: center;
}

.mtf-retired-film__heading {
	margin: 0 0 12px;
	color: #fff;
	font-family: inherit;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}

.mtf-retired-film__copy {
	max-width: 700px;
	margin: 0 auto;
	color: #f0f0f0;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.55;
}

@media (max-width: 640px) {

	.mtf-retired-film__message {
		padding: 26px 22px 30px;
	}

	.mtf-retired-film__heading {
		font-size: 23px;
	}

	.mtf-retired-film__copy {
		font-size: 16px;
	}

}


/* ==================================================
   SOURCE: css/films-sections.css
   ================================================== */

/* FILMS — HEADER AND FOOTER ARRANGEMENT
 * Shared type, spacing and theme colors are in tokens.css/sections.css.
 */
.mtf-films-header.mtf-archive-context { position: relative; }
.mtf-films-header--enhanced.mtf-archive-context {
  width: 100%;
  max-width: none;
  margin: 0 0 0px;
  padding: clamp(44px, 6vw, 80px) var(--mtf-section-gutter) 0;
  background: transparent;
}
.mtf-films-header--enhanced .mtf-films-header__inner {
  width: 100%;
  max-width: var(--mtf-content-width);
  margin: 0 auto;
}
.mtf-films-header--enhanced .mtf-section__heading { margin-bottom: 24px; }
.mtf-films-header--enhanced .mtf-archive-context-title {
  font-size: clamp(2rem, 2.5rem, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: none;
}
.mtf-films-header--enhanced .mtf-section__eyebrow { margin-bottom: 10px; }
.mtf-films-header:not(.mtf-films-header--enhanced) .mtf-archive-context-copy {
  max-width: var(--mtf-reading-width);
  margin: 20px auto 0;
  text-align: center;
}
.mtf-films-header__subtitle {
  max-width: var(--mtf-reading-width);
  margin: 15px auto 0;
  font-size: clamp(1.07rem, 1.45vw, 1.27rem);
  line-height: 1.5;
  font-style: italic;
  color: var(--mtf-section-muted, #777);
}
.mtf-films-header--enhanced .mtf-films-header__intro {
  max-width: var(--mtf-reading-width);
  margin: 24px auto 32px;
  text-align: center;
}
.mtf-films-header__gallery-title {
  margin: clamp(32px, 4vw, 52px) 0 10px;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.mtf-films-header--enhanced .mtf-film-browser { margin-top: 22px; }
.mtf-film-count-slot:empty { display: none; }
.mtf-film-count-slot .mtf-film-count {
  margin: 6px 0 0;
  color: var(--mtf-section-muted, #777);
  font-size: 0.95rem;
  line-height: 1.4;
}
.mtf-films-footer { position: relative; }
.mtf-films-footer__section .mtf-section__prose {
  max-width: var(--mtf-reading-width);
  margin-inline: auto;
}
.mtf-films-footer__section .mtf-section__heading { margin-bottom: 22px; }
.mtf-films-footer__cta .mtf-section__description { line-height: 1.65; }
@media screen and (max-width: 767px) {
  .mtf-films-header--enhanced.mtf-archive-context {
    margin-bottom: 32px;
    padding-top: 36px;
  }
}


/* =========================================================
   FILMS — UNIVERSAL FOOTER BACKGROUND

   All universal sections following the tag-specific
   content use white instead of the light-gray theme.
   ========================================================= */

.mtf-section.mtf-films-footer__shared,
body:has(.mtf-films-footer__shared)
.mtf-section.mtf-film-testimonials {
    --mtf-section-bg: var(--mtf-color-background, #fff);

    background-color: var(--mtf-color-background, #fff);
}



/* =========================================================
   FILMS FOOTER — ANIMATED TEXT LINK
   ========================================================= */

.mtf-films-footer__more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
    text-align: center;
}

.mtf-films-footer__more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

    color: var(--mtf-section-text);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none !important;
}

.mtf-films-footer__more-arrow {
    display: inline-block;
    transition: transform 250ms ease;
}

/* Move only the arrow, not the text. */

.mtf-films-footer__more-link:hover
.mtf-films-footer__more-arrow,
.mtf-films-footer__more-link:focus-visible
.mtf-films-footer__more-arrow {
    transform: translateX(5px);
}

.mtf-films-footer__more-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
    .mtf-films-footer__more-arrow {
        transition: none;
    }
}

/* ==================================================
   SOURCE: css/films-testimonials.css
   ================================================== */

/* ==================================================
	 MARK THOMAS FILMS — FILM TESTIMONIALS
	 ================================================== */


/* ==================================================
	 TESTIMONIAL CONTAINER
	 ================================================== */

.mtf-film-testimonial {
	box-sizing: border-box;

	width: calc(100% - 48px);
	max-width: 960px;

	margin: 0 auto;

	padding:
		6px
		0
		6px
		clamp(24px, 3vw, 40px);

	border-left:
		3px solid
		var(--mtf-section-rule);

	background: transparent;
	border-radius: 0;
	box-shadow: none;

	transition:
		opacity 250ms ease;
}


.mtf-film-testimonial.is-changing {
	opacity: 0;
}


/* ==================================================
	 QUOTE MARK
	 ================================================== */

.mtf-film-testimonial-mark {
	display: block;

	height: 24px;

	margin:
		0 0 12px;

	font-size: 2.7rem;
	font-weight: 600;
	line-height: 0.7;

	color:
		var(--mtf-section-faint);
}


/* ==================================================
	 QUOTE CONTENT
	 ================================================== */

.mtf-film-testimonial-quote {
	margin: 0;
	padding: 0;

	border: 0;
}


.mtf-film-testimonial-text {
	max-width: 850px;

	margin: 0;

	font-size: clamp(
		1.3rem,
		1.6vw,
		1.7rem
	);

	font-weight: 400;
	line-height: 1.4;

	letter-spacing: 0;

	color:
		var(--mtf-section-text);
}


/* ==================================================
	 COUPLE NAME
	 ================================================== */

.mtf-film-testimonial-name {
	margin-top: 18px;

	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.2;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	color:
		var(--mtf-section-muted);
}


/* ==================================================
	 MOBILE
	 ================================================== */

@media screen and (max-width: 767px) {

	.mtf-film-testimonial {
		width: 100%;
		max-width: none;

		padding:
			5px
			0
			5px
			20px;

		border-left-width: 3px;
	}


	.mtf-film-testimonial-mark {
		height: 22px;

		margin-bottom: 10px;

		font-size: 2.4rem;
	}


	.mtf-film-testimonial-text {
		font-size: 1.15rem;
		line-height: 1.45;
	}


	.mtf-film-testimonial-name {
		margin-top: 16px;

		font-size: 0.64rem;
	}

}


/* ==================================================
	 REDUCED MOTION
	 ================================================== */

@media (prefers-reduced-motion: reduce) {

	.mtf-film-testimonial {
		transition: none;
	}

}

/* ==================================================
   SOURCE: css/films.css
   ================================================== */


/* =========================================================
	 INDIVIDUAL FILM — HEADER
	 ========================================================= */

.blog-item-top-wrapper {
	margin-bottom: 32px;
}

.blog-item-top-wrapper .blog-item-title,
.blog-item-top-wrapper .entry-title {
	margin: 0;
}

.blog-item-top-wrapper .entry-title {
	font-size: clamp(2.3rem, 4vw, 3.6rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.blog-item-top-wrapper .blog-item-meta-wrapper,
.blog-item-top-wrapper .blog-meta-item--categories {
	margin: 0;
	padding: 0;
}

.blog-item-top-wrapper .blog-meta-item--categories {
	margin-bottom: 12px;
}

.blog-item-top-wrapper .blog-item-category {
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}


/* =========================================================
	 FILMS INTRO + EXPLORER
	 ========================================================= */

.mtf-films-intro-explorer {
	box-sizing: border-box;
	width: calc(100% - 48px);
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 24px 0;
	text-align: center;
}


/* =========================================================
	 HERO
	 ========================================================= */

.mtf-films-intro {
	max-width: 920px;
	margin: 0 auto 25px;
}

.mtf-films-intro-title {
	margin: 0 0 12px;
	font-size: clamp(2rem, 3.4vw, 3.35rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.mtf-films-intro-copy {
	max-width: 760px;
	margin: 0 auto;
	font-size: clamp(0.95rem, 1.2vw, 1.08rem);
	line-height: 1.5;
	opacity: 0.72;
}


/* =========================================================
	 EXPLORE WEDDING FILMS
	 ========================================================= */

.mtf-film-explorer {
	max-width: 1050px;
	margin: 0 auto;
	padding-top: 40px;
}

.mtf-film-explorer-title {
	margin: 0 0 2px;
	font-size: clamp(1.08rem, 1.45vw, 1.32rem);
	font-weight: 500;
	line-height: 1.15;
}

.mtf-film-explorer-copy {
	margin: 0 0 9px;
	font-size: 0.74rem;
	line-height: 1.25;
	letter-spacing: 0.015em;
	opacity: 0.55;
}


/* =========================================================
	 FILM BROWSER
	 ========================================================= */

.mtf-film-browser {
	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	max-width: 900px;
	margin: 18px auto 0;
	text-align: left;
}


/* =========================================================
	 FILM BROWSER — DROPDOWNS
	 ========================================================= */

.mtf-dropdown {
	position: relative;
	margin: 0;
}

.mtf-dropdown summary {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 13px 16px;
	border: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: 5px;
	background: #fff;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.25;
	list-style: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.mtf-dropdown summary::-webkit-details-marker {
	display: none;
}

.mtf-dropdown summary::marker {
	content: '';
}

@media (hover: hover) {
	.mtf-dropdown summary:hover {
		border-color: rgba(0, 0, 0, 0.42);
	}
}

.mtf-dropdown[open] summary {
	border-color: rgba(0, 0, 0, 0.42);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}


/* =========================================================
	 FILM BROWSER — CHEVRON
	 ========================================================= */

.mtf-chevron {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.mtf-dropdown[open] .mtf-chevron {
	margin-top: 4px;
	transform: rotate(225deg);
}


/* =========================================================
	 FILM BROWSER — PANEL
	 ========================================================= */

.mtf-dropdown-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	box-sizing: border-box;
	width: 100%;
	max-height: 420px;
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}


/* =========================================================
	 FILM BROWSER — SEARCH
	 ========================================================= */

.mtf-search-wrap {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	background: #fff;
}

.mtf-film-browser .mtf-search {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 9px 11px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 4px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 0.84rem;
	line-height: 1.25;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

.mtf-film-browser .mtf-search:focus {
	border-color: rgba(0, 0, 0, 0.48);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.07);
}

.mtf-film-browser .mtf-search::placeholder {
	color: inherit;
	opacity: 0.45;
}


/* =========================================================
	 FILM BROWSER — LINKS
	 ========================================================= */

.mtf-link-list {
	padding: 6px 0;
}

.mtf-link-list a {
	display: block;
	padding: 9px 14px;
	color: inherit;
	font-size: 0.84rem;
	line-height: 1.35;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		opacity 0.15s ease;
}

.mtf-link-list a[hidden] {
	display: none;
}

@media (hover: hover) {
	.mtf-link-list a:hover {
		background: rgba(0, 0, 0, 0.045);
	}
}


/* =========================================================
	 FILM BROWSER — CURRENT ITEM
	 ========================================================= */

.mtf-current-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 14px;
	background: #f3f3f3;
	color: inherit;
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.35;
	cursor: default;
}

.mtf-current-item[hidden] {
	display: none;
}

.mtf-current-item-name {
	min-width: 0;
}

.mtf-current-label {
	flex: 0 0 auto;
	font-size: 0.64rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.48;
}


/* =========================================================
	 FILM BROWSER — NO RESULTS
	 ========================================================= */

.mtf-no-results {
	padding: 14px;
	font-size: 0.8rem;
	line-height: 1.35;
	opacity: 0.6;
}

.mtf-no-results[hidden] {
	display: none;
}


/* =========================================================
	 FILTERED ARCHIVE CONTEXT
	 ========================================================= */

.mtf-archive-context {
	box-sizing: border-box;
	width: calc(100% - 48px);
	max-width: 1100px;
	margin: 28px auto 38px;
	padding: 0 24px;
	text-align: center;
}

.mtf-archive-context-label {
	margin: 0 0 6px;
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.35;
	opacity: 0.62;
}

.mtf-archive-context-title {
	margin: 0;
	font-size: clamp(1.5rem, 2.3vw, 2.05rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}


/* =========================================================
	 FILM CARDS
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card {
	position: relative;
	cursor: pointer;
	padding-bottom: 40px;
	border-radius: 5px 5px 0 0;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease;
}

@media (hover: hover) {
	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
	}
}


/* =========================================================
	 FILM CARD — FEATURED IMAGE
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
> div:first-child
> a.image-wrapper.mtf-film-media {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	padding-bottom: 0;
	overflow: hidden;
	border-radius: 5px 5px 0 0;
}

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
a.image-wrapper.mtf-film-media
img.mtf-film-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card:hover
	a.image-wrapper.mtf-film-media
	img.mtf-film-image {
		transform: scale(1.045);
	}
}


/* =========================================================
	 FILM CARD — TEXT
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.blog-basic-grid--text {
	position: relative;
}


/* =========================================================
	 FILM CARD — METADATA
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-film-meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-bottom: 0.8rem;
}


/* =========================================================
	 FILM CARD — CATEGORY
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-film-categories {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-film-categories a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card
	.mtf-film-categories a:hover {
		opacity: 0.6;
	}
}


/* =========================================================
	 FILM CARD — TAGS
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-film-tags {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-film-tags a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card
	.mtf-film-tags a:hover {
		opacity: 0.55;
	}
}


/* =========================================================
	 FILM CARD — TAXONOMY SEPARATORS
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-category-separator,

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-tag-separator {
	display: inline-block;
	padding: 0 0.18em;
}


/* =========================================================
	 FILM CARD — TITLE
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.blog-title {
	margin-bottom: 0.65rem;
}

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.blog-title a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

@media (hover: hover) {
	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card:hover
	.blog-title a {
		opacity: 0.75;
	}
}


/* =========================================================
	 FILM CARD — EXCERPT
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-film-excerpt {
	margin-top: 0.8rem;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-film-excerpt
.blog-excerpt-wrapper {
	width: 100%;
	margin: 0;
}

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-film-excerpt p {
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}


/* =========================================================
	 FILM CARD — WATCH THE FILM
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card
.mtf-watch-film {
	display: inline-block;
	margin-top: 1rem;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card
	.mtf-watch-film:hover {
		opacity: 0.6;
	}
}


/* =========================================================
	 FILM CARD — INTERACTIVE LINKS
	 ========================================================= */

.blog-basic-grid.collection-content-wrapper
article.blog-basic-grid--container.mtf-film-card a {
	position: relative;
	z-index: 2;
}


/* =========================================================
	 CENTER SMALL FILM ARCHIVES
	 ========================================================= */

@media screen and (min-width: 768px) {

	/* One card */
	.blog-basic-grid.collection-content-wrapper
	> article.blog-item:only-child {
		grid-column: 2;
	}

	/* Two cards */
	.blog-basic-grid.collection-content-wrapper:has(
		> article.blog-item:nth-child(2):last-child
	) {
		display: flex;
		justify-content: center;
		gap: 40px;
	}

	.blog-basic-grid.collection-content-wrapper:has(
		> article.blog-item:nth-child(2):last-child
	)
	> article.blog-item {
		flex: 0 0 calc((100% - 80px) / 3);
		min-width: 0;
	}

}


/* =========================================================
	 MOBILE — FILMS
	 ========================================================= */

@media screen and (max-width: 767px) {

	.mtf-films-intro-explorer {
		width: calc(100% - 32px);
		margin-bottom: 0;
		padding: 34px 10px 0;
	}

	.mtf-films-intro {
		margin-bottom: 0;
	}

	.mtf-films-intro-title {
		font-size: 2rem;
	}

	.mtf-films-intro-copy {
		font-size: 0.93rem;
	}

	.mtf-film-explorer-title {
		font-size: 1.06rem;
	}

	.mtf-film-explorer-copy {
		margin-bottom: 8px;
		font-size: 0.7rem;
	}

	.mtf-film-browser {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 14px;
	}

	.mtf-dropdown-panel {
		position: static;
		margin-top: 6px;
		max-height: 340px;
	}

	.mtf-dropdown summary {
		min-height: 48px;
		padding: 12px 14px;
	}

	.mtf-archive-context {
		width: calc(100% - 32px);
		margin-top: 22px;
		margin-bottom: 28px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.mtf-archive-context-label {
		font-size: 0.82rem;
	}

	.mtf-archive-context-title {
		font-size: 1.45rem;
	}

	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card
	.mtf-film-categories,

	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card
	.mtf-film-tags {
		font-size: 0.68rem;
	}

}


/* =========================================================
	 REDUCED MOTION
	 ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.mtf-dropdown summary,
	.mtf-chevron,
	.mtf-link-list a,

	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card,

	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card
	a.image-wrapper.mtf-film-media
	img.mtf-film-image,

	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card
	.blog-title a,

	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__slide,

	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__media {
		transition: none;
	}

	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card:hover {
		transform: none;
	}

	.blog-basic-grid.collection-content-wrapper
	article.blog-basic-grid--container.mtf-film-card:hover
	a.image-wrapper.mtf-film-media
	img.mtf-film-image {
		transform: none;
	}

	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__slide:hover {
		translate: none;
	}

	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__slide:hover
	.user-items-list-carousel__media {
		transform: none;
	}

}


/* Prevent dropdown scrolling from spilling into the page. */

.mtf-dropdown-panel,
.mtf-link-list {
	overscroll-behavior-y: contain;
}

@media screen and (min-width: 768px) {
	body[class*="collection-type-blog"]
	.blog-item-top-wrapper
	.blog-item-meta-wrapper {
		margin-bottom: 0.75rem;
	}
}


/* =========================================================
	 FILM ARCHIVE — SHARED LOAD MORE

	 Used on /films and venue/city/category archives.
	 ========================================================= */

.mtf-film-load-more {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	grid-column: 1 / -1;
	width: calc(100% - 48px);
	max-width: 1180px;
	margin: 0 auto 40px;
	padding: 0 var(--mtf-section-gutter, 24px);
	text-align: center;
}

.mtf-film-load-more__status {
	margin: 0 0 16px;
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
	opacity: 0.58;
}

.mtf-film-load-more__button {
	flex: 0 0 auto;
	align-self: center;
	min-width: 190px;
}

.mtf-film-load-more__button:disabled {
	cursor: wait;
	opacity: 0.55;
}

.mtf-film-load-more__button[hidden] {
	display: none;
}

/*
 * Hide Squarespace archive navigation only when our
 * Load More controller is active.
 * Individual film previous/next links remain untouched.
 */

body.mtf-load-more-active .blog-list-pagination,
body.mtf-load-more-active .item-pagination--prev-next {
	display: none;
}

@media (max-width: 767px) {
	.mtf-film-load-more {
		width: calc(100% - 32px);
		margin-block: 30px;
		padding-inline: 16px;
	}
}


/* ==================================================
   SOURCE: css/forms.css
   ================================================== */

/* =========================================================
	 INQUIRY FORM — REQUIRED ASTERISK
	 ========================================================= */

#block-c3a7e802903a447efe19
.form-item
.description.required {
	font-size: 0 !important;
}

#block-c3a7e802903a447efe19
.form-item
.description.required::after {
	content: "*";

	font-size: 0.85rem;
	line-height: 1;

	margin-left: 0.15em;

	vertical-align: super;
}


/* =========================================================
	 INQUIRY FORM — VISUAL FIELD ORDER
	 ========================================================= */

/*
 * Squarespace / DOM order remains:
 *
 * Wedding Date
 * Optional Questions
 * Optional fields
 * Message
 *
 * Visual order becomes:
 *
 * Wedding Date
 * Message
 * Optional Questions
 * Optional fields
 *
 * Nothing is physically moved in the DOM.
 */

#block-c3a7e802903a447efe19
.mtf-form-message {
	order: 10;

	grid-column: 1 / -1 !important;
}

#block-c3a7e802903a447efe19
.mtf-form-optional {
	order: 20;
}


/* =========================================================
	 INQUIRY FORM — MOBILE VISUAL ORDER
	 ========================================================= */

@media screen and (max-width: 767px) {

	/*
	 * CSS order only works on flex/grid children.
	 * Desktop is already a grid via forms.js.
	 * Use flex on mobile while retaining the normal
	 * one-field-per-row Squarespace appearance.
	 */

	#block-c3a7e802903a447efe19
	.field-list {
		display: flex !important;
		flex-direction: column;
	}

}


/* =========================================================
	 INQUIRY FORM — SEND BUTTON SPACING
	 ========================================================= */

#block-c3a7e802903a447efe19
button[type="submit"] {
	margin-top: 18px;
}


/* =========================================================
	 INQUIRY FORM — TOP ALIGN CONTENT
	 ========================================================= */

@media screen and (min-width: 768px) {

	.fe-block-c3a7e802903a447efe19
	.sqs-block {
		justify-content: flex-start;
	}

	.fe-block-c3a7e802903a447efe19
	.sqs-block-alignment-wrapper {
		align-items: flex-start;
	}

}






/* Get rid of padding on bottom of form on mobile */
.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--small>.content-wrapper {
padding-bottom: 0;
}

/* ==================================================
   SOURCE: css/journal-archive.css
   ================================================== */


/* =========================================================
	 MARK THOMAS FILMS — JOURNAL ARCHIVE

	 Full-width photographic hero
	 Narrower, two-column editorial archive
	 Category above title
	 Series tag and part number below title
	 Responsive single-column mobile layout
	 ========================================================= */


/* VARIABLES */

html.mtf-blog-archive-page {
	--mtf-journal-ink: #202020;
	--mtf-journal-muted: #65666b;
	--mtf-journal-line: rgba(32, 32, 32, .17);

	--mtf-journal-hero-width: 1530px;
	--mtf-journal-list-width: 1000px;

	--mtf-journal-serif:
		Georgia,
		"Times New Roman",
		serif;

	--mtf-journal-sans:
		Arial,
		Helvetica,
		sans-serif;
}


/* =========================================================
	 HERO
	 ========================================================= */

html.mtf-blog-archive-page
.mtf-journal-hero {
	position: relative;
	left: 50%;

	box-sizing: border-box;

	width: 100vw;
	min-height: clamp(265px, 19vw, 320px);

	margin: 0;
	overflow: hidden;

	transform: translateX(-50%);

	background-color: #5d584e;

	background-image:
		linear-gradient(
			90deg,
			rgba(15, 17, 16, .80) 0%,
			rgba(15, 17, 16, .45) 40%,
			rgba(15, 17, 16, .05) 88%
		),
		url("https://images.squarespace-cdn.com/content/6a93177fab3bb776e4354e2b/d5464ac6-fbae-4560-be7f-52967e67af4b/mtf-back-porch-sunset-hill-country.png");

	background-position:
		center,
		center 48%;

	background-size:
		cover,
		cover;

	background-repeat: no-repeat;

	color: #fff;
}


html.mtf-blog-archive-page
.mtf-journal-hero__inner {
	box-sizing: border-box;

	width: min(
		100%,
		var(--mtf-journal-hero-width)
	);

	margin: 0 auto;

	padding:
		clamp(38px, 3vw, 50px)
		clamp(25px, 4vw, 62px);
}


/* HERO EYEBROW AND SUBTITLE */

html.mtf-blog-archive-page
.mtf-journal-hero__eyebrow,

html.mtf-blog-archive-page
.mtf-journal-hero__subtitle {
	font-family: var(--mtf-journal-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.75;

	letter-spacing: .21em;
	text-transform: uppercase;
}


html.mtf-blog-archive-page
.mtf-journal-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;

	margin: 0 0 14px;
}


html.mtf-blog-archive-page
.mtf-journal-hero__eyebrow::after {
	content: "";

	width: 125px;
	height: 1px;

	background: rgba(255, 255, 255, .7);
}


/* HERO TITLE */

html.mtf-blog-archive-page
.mtf-journal-hero__title {
	max-width: 780px;

	margin: 0 0 16px;

	color: #fff;

	font-family: var(--mtf-journal-serif);
	font-size: clamp(30px, 3.1vw, 2.6rem);
	font-weight: 400;
	line-height: 1.12;

	letter-spacing: -.025em;
	text-transform: none;
}


html.mtf-blog-archive-page
.mtf-journal-hero__subtitle {
	margin: 0;
}


/* =========================================================
	 ARCHIVE CONTAINER

	 Keep the hero full-width, but narrow the
	 article listing to 1,000px.
	 ========================================================= */

html.mtf-blog-archive-page
.blog-single-column.collection-content-wrapper {
	box-sizing: border-box;

	width: 100%;
	max-width: none;

	margin-top: 0;
	padding-top: 0;
}


html.mtf-blog-archive-page
.blog-single-column--wrapper {
	display: block;

	box-sizing: border-box;

	width: 100%;
	max-width: var(--mtf-journal-list-width);

	margin: 0 auto;

	padding:
		0
		clamp(24px, 3vw, 42px)
		60px;
}


/* =========================================================
	 ARTICLE ROWS
	 ========================================================= */

html.mtf-blog-archive-page
.blog-single-column--wrapper
> article.blog-single-column--container {
	position: relative;
	isolation: isolate;

	display: block;
	box-sizing: border-box;

	width: 100%;
	max-width: none;
	min-height: 0;

	margin: 0;

	padding:
		clamp(38px, 3vw, 48px)
		0
		clamp(24px, 2.1vw, 30px);

	border-bottom:
		1px solid var(--mtf-journal-line);

	background: transparent;
	box-shadow: none;

	opacity: 1;
	visibility: visible;

	animation: none;
	transition: none;
	transform: none;

	cursor: pointer;
}


html.mtf-blog-archive-page
.blog-single-column--wrapper
> article.blog-single-column--container:last-of-type {
	border-bottom: 0;
}


/* HIDE UNUSED SQUARESPACE ELEMENTS */

html.mtf-blog-archive-page
article.blog-single-column--container
> div:has(> .image-wrapper),

html.mtf-blog-archive-page
article.blog-single-column--container
> .image-wrapper,

html.mtf-blog-archive-page
article.blog-single-column--container
> .blog-article-spacer,

html.mtf-blog-archive-page
article.blog-single-column--container
.blog-meta-section {
	display: none;
}


/* =========================================================
	 TWO-COLUMN ARTICLE LAYOUT

	 Fixed 40px gap.
	 Slightly wider excerpt column.
	 ========================================================= */

html.mtf-blog-archive-page
article.blog-single-column--container
.blog-single-column--text {
	display: grid;
	box-sizing: border-box;

	grid-template-columns:
		minmax(0, .96fr)
		minmax(0, 1.12fr);

	grid-template-rows:
		auto
		auto
		minmax(0, 1fr);

	column-gap: 40px;

	align-items: start;

	width: 100%;
	max-width: none;

	margin: 0;
	padding: 0;
}


/* =========================================================
	 CATEGORY ABOVE ARTICLE TITLE
	 ========================================================= */

html.mtf-blog-archive-page
.mtf-journal-eyebrow {
	display: flex;

	grid-column: 1;
	grid-row: 1;

	align-items: center;
	gap: 15px;

	min-width: 0;

	margin: 0 0 10px;

	font-family: var(--mtf-journal-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;

	letter-spacing: .18em;
	text-transform: uppercase;
}


html.mtf-blog-archive-page
.mtf-journal-eyebrow::after {
	content: "";

	flex: 1;

	width: 120px;
	max-width: 120px;
	height: 1px;

	background: #aeb0b2;
}


/* =========================================================
	 ARTICLE TITLES — 1.6REM
	 ========================================================= */

html.mtf-blog-archive-page
article.blog-single-column--container
.blog-title {
	grid-column: 1;
	grid-row: 2;

	min-width: 0;

	margin: 0 0 10px;
	padding: 0;

	color: var(--mtf-journal-ink);

	font-family: var(--mtf-journal-serif);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.2;

	letter-spacing: -.025em;

	text-align: left;
	text-transform: none;
}


html.mtf-blog-archive-page
article.blog-single-column--container
.blog-title a {
	color: inherit;
	text-decoration: none;
}


/* =========================================================
	 TAG AND SERIES NUMBER
	 ========================================================= */

html.mtf-blog-archive-page
.mtf-journal-taxonomy {
	display: flex;

	grid-column: 1;
	grid-row: 3;

	align-items: baseline;
	flex-wrap: wrap;

	gap: 8px 16px;

	min-width: 0;
	margin: 0;

	color: var(--mtf-journal-muted);

	font-family: var(--mtf-journal-sans);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.75;

	letter-spacing: .18em;
	text-transform: uppercase;
}


html.mtf-blog-archive-page
.mtf-journal-taxonomy__tags,

html.mtf-blog-archive-page
.mtf-journal-taxonomy__categories {
	display: inline-flex;

	align-items: baseline;
	flex-wrap: wrap;

	gap: 9px;
}


html.mtf-blog-archive-page
.mtf-journal-eyebrow a,

html.mtf-blog-archive-page
.mtf-journal-taxonomy a {
	color: inherit;
	text-decoration: none;

	transition: opacity .2s ease;
}


html.mtf-blog-archive-page
.mtf-journal-eyebrow a:hover,

html.mtf-blog-archive-page
.mtf-journal-taxonomy a:hover {
	opacity: .65;
}


/* =========================================================
	 EXCERPT COLUMN

	 Stacking order places the entire excerpt above
	 the animated page curl.
	 ========================================================= */

html.mtf-blog-archive-page
article.blog-single-column--container
.blog-excerpt {
	position: relative;
	z-index: 3;

	display: flex;

	grid-column: 2;
	grid-row: 1 / 4;

	flex-direction: column;
	align-self: stretch;
	align-items: stretch;

	box-sizing: border-box;

	width: 100%;
	height: auto;
	max-height: none;

	margin: 0;

	padding: 30px 15px 0 0;

	overflow: visible;
}


/* ACTUAL SQUARESPACE EXCERPT */

html.mtf-blog-archive-page
article.blog-single-column--container
.blog-excerpt-wrapper {
	display: block;

	height: auto;
	max-height: none;

	overflow: visible;
}


html.mtf-blog-archive-page
article.blog-single-column--container
.blog-excerpt-wrapper p {
	margin: 0;

	color: #595a60;

	font-family: var(--mtf-journal-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;

	white-space: normal;
}


/* HIDE COMPLETE ARTICLE CONTENT IN ARCHIVE */

html.mtf-blog-archive-page
article.blog-single-column--container
.blog-excerpt
.blog-body-wrapper {
	display: none;
}


/* HIDE NATIVE SQUARESPACE READ MORE */

html.mtf-blog-archive-page
article.blog-single-column--container
.blog-more-link,

html.mtf-blog-archive-page
article.blog-single-column--container
.blog-read-more {
	display: none;
}


/* =========================================================
	 CUSTOM READ MORE

	 Higher stacking order than the page curl.
	 ========================================================= */

html.mtf-blog-archive-page
.mtf-journal-read-more {
	position: relative;
	z-index: 4;

	display: inline-block;

	align-self: flex-end;

	margin-top: auto;
	padding: 17px 0 0;

	color: var(--mtf-journal-ink);

	font-family: var(--mtf-journal-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;

	letter-spacing: .20em;

	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;

	transition: opacity .2s ease;
}


html.mtf-blog-archive-page
.mtf-journal-read-more:hover {
	opacity: .6;
}


/* =========================================================
	 ANIMATED PAGE CURL

	 Shadow: z-index 1
	 Fold:   z-index 2
	 Excerpt: z-index 3
	 Read More: z-index 4
	 ========================================================= */

html.mtf-blog-archive-page
article.blog-single-column--container::before,

html.mtf-blog-archive-page
article.blog-single-column--container::after {
	content: "";

	position: absolute;

	right: 0;
	bottom: 0;

	width: clamp(44px, 4vw, 66px);
	height: clamp(44px, 4vw, 66px);

	clip-path:
		polygon(
			100% 0,
			100% 100%,
			0 100%
		);

	pointer-events: none;

	opacity: 0;

	transform: scale(.04);
	transform-origin: 100% 100%;

	transition:
		transform .34s
			cubic-bezier(.22, 1, .36, 1),
		opacity .22s ease;
}


/* SHADOW UNDER FOLDED CORNER */

html.mtf-blog-archive-page
article.blog-single-column--container::before {
	z-index: 1;

	background:
		linear-gradient(
			135deg,
			transparent 47%,
			rgba(145, 128, 112, .22) 76%
		);

	filter: blur(3px);

	transform:
		translate(3px, 3px)
		scale(.04);
}


/* FOLDED PAPER */

html.mtf-blog-archive-page
article.blog-single-column--container::after {
	z-index: 2;

	background:
		linear-gradient(
			140deg,
			#fff 0%,
			#fefdfb 40%,
			#eee9e2 70%,
			#cdc5bc 100%
		);

	border-bottom-right-radius: 5px;

	filter:
		drop-shadow(
			-3px 3px 2px
			rgba(48, 36, 26, .08)
		);
}


/* HOVER ANIMATION */

@media (hover: hover) and (pointer: fine) {

	html.mtf-blog-archive-page
	article.blog-single-column--container:hover::before {
		opacity: 1;

		transform:
			translate(3px, 3px)
			scale(1);
	}


	html.mtf-blog-archive-page
	article.blog-single-column--container:hover::after {
		opacity: 1;
		transform: scale(1);
	}

}


/* KEYBOARD ACCESSIBILITY */

html.mtf-blog-archive-page
article.blog-single-column--container:focus-within::before {
	opacity: 1;

	transform:
		translate(3px, 3px)
		scale(1);
}


html.mtf-blog-archive-page
article.blog-single-column--container:focus-within::after {
	opacity: 1;
	transform: scale(1);
}


html.mtf-blog-archive-page
.blog-title a:focus-visible,

html.mtf-blog-archive-page
.mtf-journal-eyebrow a:focus-visible,

html.mtf-blog-archive-page
.mtf-journal-taxonomy a:focus-visible,

html.mtf-blog-archive-page
.mtf-journal-read-more:focus-visible {
	outline: 2px solid #776c5b;
	outline-offset: 5px;
}


/* =========================================================
	 MOBILE

	 Single column at 800px.
	 No extra excerpt top padding.
	 ========================================================= */

@media (max-width: 800px) {

	html.mtf-blog-archive-page
	.mtf-journal-hero {
		min-height: 265px;
	}


	html.mtf-blog-archive-page
	.mtf-journal-hero__inner {
		padding: 38px 25px;
	}


	html.mtf-blog-archive-page
	.blog-single-column--wrapper {
		padding: 0 25px 48px;
	}


	html.mtf-blog-archive-page
	.blog-single-column--wrapper
	> article.blog-single-column--container {
		padding: 32px 0 22px;
	}


	html.mtf-blog-archive-page
	article.blog-single-column--container
	.blog-single-column--text {
		grid-template-columns:
			minmax(0, 1fr);

		grid-template-rows:
			auto auto auto auto;

		gap: 0;
	}


	html.mtf-blog-archive-page
	.mtf-journal-eyebrow {
		grid-column: 1;
		grid-row: 1;
	}


	html.mtf-blog-archive-page
	article.blog-single-column--container
	.blog-title {
		grid-column: 1;
		grid-row: 2;
	}


	html.mtf-blog-archive-page
	.mtf-journal-taxonomy {
		grid-column: 1;
		grid-row: 3;

		margin-bottom: 22px;
	}


	html.mtf-blog-archive-page
	article.blog-single-column--container
	.blog-excerpt {
		grid-column: 1;
		grid-row: 4;

		padding: 0 15px 0 0;
	}

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

	html.mtf-blog-archive-page
	article.blog-single-column--container::before,

	html.mtf-blog-archive-page
	article.blog-single-column--container::after,

	html.mtf-blog-archive-page
	.mtf-journal-read-more,

	html.mtf-blog-archive-page
	.mtf-journal-eyebrow a,

	html.mtf-blog-archive-page
	.mtf-journal-taxonomy a {
		transition: none;
	}

}


/* ==================================================
   SOURCE: css/journal-editorial.css
   ================================================== */


/* =========================================================
	 MARK THOMAS FILMS — EDITORIAL BLOG

	 Individual /journal/ article pages only.

	 The mtf-editorial-blog class is added to <html>
	 by our early Squarespace header script.

	 ========================================================= */


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

html.mtf-editorial-blog {
	--mtf-blog-paper: #f5f2ec;
	--mtf-blog-ink: #202020;
	--mtf-blog-rule: rgba(0, 0, 0, .17);
	--mtf-blog-reading-width: 760px;
}


/* =========================================================
	 PAGE BACKGROUND

	 Cover Squarespace's actual section background as
	 well as the article's internal containers.
	 ========================================================= */

html.mtf-editorial-blog
body.collection-type-blog-single-column,

html.mtf-editorial-blog
body.collection-type-blog-single-column
main#page,

html.mtf-editorial-blog
section.page-section.collection-type-blog-single-column,

html.mtf-editorial-blog
section.page-section.collection-type-blog-single-column
> .section-border,

html.mtf-editorial-blog
section.page-section.collection-type-blog-single-column
> .section-border > .section-background,

html.mtf-editorial-blog
section.page-section.collection-type-blog-single-column
> .content-wrapper,

html.mtf-editorial-blog
section.page-section.collection-type-blog-single-column
> .content-wrapper > .content,

html.mtf-editorial-blog
.blog-item-wrapper,

html.mtf-editorial-blog
.blog-item-inner-wrapper,

html.mtf-editorial-blog
.blog-item-content-wrapper,

html.mtf-editorial-blog
.blog-item-content {
	background-color: var(--mtf-blog-paper);
}


/* Remove unnecessary space below the article section. */

html.mtf-editorial-blog
section.page-section.collection-type-blog-single-column {
	padding-bottom: 0;
	margin-bottom: 0;
	min-height: 0;
}

html.mtf-editorial-blog
section.page-section.collection-type-blog-single-column
> .content-wrapper {
	padding-bottom: 0;
}


/* =========================================================
	 ARTICLE CONTAINERS

	 One outer container and one centered reading column.

	 Squarespace's intermediate article element must not
	 impose an additional, narrower content width.
	 ========================================================= */

html.mtf-editorial-blog .blog-item-wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px 42px;
}

html.mtf-editorial-blog
body.collection-type-blog-single-column
.blog-item-wrapper > article {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

html.mtf-editorial-blog
body.collection-type-blog-single-column
.blog-item-inner-wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mtf-blog-reading-width);
	margin: 0 auto;
	padding: 0;
}

html.mtf-editorial-blog .blog-item-content-wrapper,
html.mtf-editorial-blog .blog-item-content {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}


/* =========================================================
	 BREADCRUMB SPACE

	 Display the charcoal bar before JavaScript inserts
	 the actual breadcrumbs to prevent a layout jump.
	 ========================================================= */

html.mtf-editorial-blog
.blog-item-wrapper:not(
	:has(> .mtf-blog-breadcrumbs)
)::before {
	content: '';
	position: relative;
	left: 50%;
	display: block;
	box-sizing: border-box;
	width: 100vw;
	min-height: 36px;
	margin: 0 0 32px;
	background: #373737;
	transform: translateX(-50%);
}


/* =========================================================
	 ACTUAL BREADCRUMBS
	 ========================================================= */

html.mtf-editorial-blog .mtf-blog-breadcrumbs {
	position: relative;
	left: 50%;
	box-sizing: border-box;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	gap: 3px clamp(12px, 1.8vw, 28px);

	width: 100vw;
	min-height: 36px;
	margin: 0 0 32px;
	padding: 7px 20px;

	background: #373737;
	color: #f4f4f4;

	transform: translateX(-50%);

	font-family: inherit;
	font-size: .66rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .18em;

	text-align: center;
	text-transform: uppercase;
}


/* NAVIGATE TO LABEL */

html.mtf-editorial-blog
.mtf-blog-breadcrumbs__label {
	color: #dedede;
	white-space: nowrap;
}


/* BREADCRUMB LIST */

html.mtf-editorial-blog
.mtf-blog-breadcrumbs__list {
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0;

	margin: 0;
	padding: 0;
	list-style: none;
}

html.mtf-editorial-blog
.mtf-blog-breadcrumbs__item {
	display: inline-flex;
	align-items: baseline;
}


/* SEPARATOR */

html.mtf-editorial-blog
.mtf-blog-breadcrumbs__separator {
	margin: 0 14px;
	color: #c8c8c8;
	font-size: 1.2em;
	letter-spacing: 0;
}


/* LINKS */

html.mtf-editorial-blog
.mtf-blog-breadcrumbs a {
	color: #ededed;
	opacity: .85;
	text-decoration: none;
	transition: opacity 180ms ease;
}

html.mtf-editorial-blog
.mtf-blog-breadcrumbs a:hover,
html.mtf-editorial-blog
.mtf-blog-breadcrumbs a:focus-visible {
	color: #fff;
	opacity: 1;
	text-decoration: none;
}

html.mtf-editorial-blog
.mtf-blog-breadcrumbs a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}


/* CURRENT ARTICLE */

html.mtf-editorial-blog
.mtf-blog-breadcrumbs__current {
	color: #fff;
	font-weight: 700;
}


/* =========================================================
	 ARTICLE HEADER

	 The actual Squarespace template uses
	 .blog-item-top-wrapper, not .blog-item-header.
	 ========================================================= */

html.mtf-editorial-blog
body.collection-type-blog-single-column
.blog-item-top-wrapper {
	box-sizing: border-box;
	width: 100%;

	margin: 0 0 20px;
	padding: 0 0 20px;

	border-bottom: 1px solid var(--mtf-blog-rule);

	text-align: center;
}

html.mtf-editorial-blog
body.collection-type-blog-single-column
.blog-item-title {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}


/* =========================================================
	 ARTICLE H1

	 Target Squarespace's complete native H1 selector.
	 Maximum desktop size: 3rem / approximately 48px.
	 ========================================================= */

html.mtf-editorial-blog
body.collection-type-blog-single-column
.blog-item-top-wrapper
.blog-item-title > h1.entry-title.entry-title--large {
	width: 100%;
	max-width: none;
	margin: 0 auto;

	color: var(--mtf-blog-ink);

	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.025em;

	text-align: center;
	text-transform: none;
}


/* =========================================================
	 POST DATE AND AUTHOR
	 ========================================================= */

html.mtf-editorial-blog .blog-item-meta-wrapper,
html.mtf-editorial-blog .blog-meta-item {
	color: #444;

	font-size: .69rem;
	line-height: 1.5;
	letter-spacing: .12em;

	text-align: center;
	text-transform: uppercase;
}


/* =========================================================
	 ARTICLE BODY

	 Eliminate competing width restrictions inside
	 Squarespace's individual text blocks.
	 ========================================================= */

html.mtf-editorial-blog
.blog-item-content .sqs-block-html,
html.mtf-editorial-blog
.blog-item-content .sqs-block-html .sqs-block-content,
html.mtf-editorial-blog
.blog-item-content .sqs-block-html .sqs-html-content {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

html.mtf-editorial-blog
.blog-item-content .sqs-block {
	padding-top: 4px;
	padding-bottom: 4px;
}


/* =========================================================
	 PARAGRAPHS
	 ========================================================= */

html.mtf-editorial-blog
.blog-item-content .sqs-block-html p {
	margin: 0 0 18px;

	color: var(--mtf-blog-ink);

	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.125rem;
	line-height: 1.68;
	letter-spacing: 0;
}


/* =========================================================
	 OPENING EDITORIAL EYEBROW

	 The opening label in Mark's existing article is a
	 Squarespace text paragraph, not a native H2.
	 ========================================================= */

html.mtf-editorial-blog
.blog-item-content
.sqs-block-html:first-child
.sqs-html-content > p.sqsrte-large:first-child {
	margin: 0;

	font-family: inherit;
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .16em;

	text-align: center;
	text-transform: uppercase;
}


/* =========================================================
	 ARTICLE HEADINGS
	 ========================================================= */

html.mtf-editorial-blog
.blog-item-content .sqs-block-html h2 {
	margin: 48px 0 20px;
	padding-top: 32px;

	border-top: 1px solid var(--mtf-blog-rule);

	color: var(--mtf-blog-ink);

	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.65rem, 2.6vw, 1.9rem);
	font-weight: 400;
	line-height: 1.2;

	text-transform: none;
}

html.mtf-editorial-blog
.blog-item-content .sqs-block-html h3 {
	margin: 32px 0 16px;

	color: var(--mtf-blog-ink);

	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1.3;

	text-transform: none;
}


/* =========================================================
	 PULL QUOTES

	 Squarespace's current Quote Blocks contain text
	 directly inside blockquote rather than necessarily
	 wrapping the text in paragraph elements.
	 ========================================================= */

html.mtf-editorial-blog
.blog-item-content .sqs-block-quote {
	box-sizing: border-box;
	width: 100%;
	max-width: none;

	margin: 38px auto;

	/* Necessary to override Squarespace's individual
		 block-ID padding rule. */
	padding: 0 !important;
}

html.mtf-editorial-blog
.blog-item-content .sqs-block-quote figure {
	margin: 0;
	padding: 0;
}

html.mtf-editorial-blog
.blog-item-content .sqs-block-quote blockquote {
	box-sizing: border-box;
	width: 100%;
	margin: 0;

	padding: 26px 16px;

	border-block: 1px solid var(--mtf-blog-rule);
	border-inline: 0;

	color: var(--mtf-blog-ink);

	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.3rem, 2.7vw, 1.8rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.4;

	text-align: center;
	quotes: none;
}

html.mtf-editorial-blog
.blog-item-content .sqs-block-quote blockquote::before,
html.mtf-editorial-blog
.blog-item-content .sqs-block-quote blockquote::after {
	content: none;
}


/* =========================================================
	 ARTICLE LINKS
	 ========================================================= */

html.mtf-editorial-blog
.blog-item-content a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}


/* =========================================================
	 REMOVE OLD BLOG PAGINATION

	 Our three-card article recommendations replace the
	 native previous/next pagination.
	 ========================================================= */

html.mtf-editorial-blog #itemPagination,
html.mtf-editorial-blog .item-pagination {
	display: none;
}


/* =========================================================
	 EMPTY COMMENTS

	 Hide an empty native comments pane.
	 Do not hide comments when actual content exists.
	 ========================================================= */

html.mtf-editorial-blog
.blog-item-comments:has(
	#blogItemCommentsContent:not(:has(*))
) {
	display: none;
}


/* =========================================================
	 MOBILE
	 ========================================================= */

@media (max-width: 767px) {

	html.mtf-editorial-blog
	.blog-item-wrapper {
		padding: 0 18px 30px;
	}

	/* Breadcrumb bar */

	html.mtf-editorial-blog
	.blog-item-wrapper:not(
		:has(> .mtf-blog-breadcrumbs)
	)::before,
	html.mtf-editorial-blog
	.mtf-blog-breadcrumbs {
		min-height: 36px;
		margin-bottom: 28px;
	}

	html.mtf-editorial-blog
	.mtf-blog-breadcrumbs {
		padding: 8px 12px;

		font-size: .58rem;
		letter-spacing: .08em;
	}

	html.mtf-editorial-blog
	.mtf-blog-breadcrumbs__label {
		display: none;
	}

	html.mtf-editorial-blog
	.mtf-blog-breadcrumbs__separator {
		margin: 0 8px;
	}

	/* Header */

	html.mtf-editorial-blog
	body.collection-type-blog-single-column
	.blog-item-top-wrapper {
		margin-bottom: 26px;
		padding-bottom: 22px;
	}

	/* Reading typography */

	html.mtf-editorial-blog
	.blog-item-content .sqs-block-html p {
		font-size: 1.0625rem;
		line-height: 1.65;
	}

	html.mtf-editorial-blog
	.blog-item-content .sqs-block-html h2 {
		margin-top: 38px;
		padding-top: 26px;
	}

}


/* =========================================================
	 REDUCED MOTION
	 ========================================================= */

@media (prefers-reduced-motion: reduce) {

	html.mtf-editorial-blog
	.mtf-blog-breadcrumbs a {
		transition: none;
	}

}






/* =========================================================
	 MARK THOMAS FILMS
	 REUSABLE EDITORIAL ARTICLE TEMPLATE

	 Applies only to our custom HTML article content.
	 Page background, native H1, breadcrumbs and related
	 posts are managed by their existing stylesheets.
	 ========================================================= */


/* ARTICLE CONTAINER */

html.mtf-editorial-blog .mtf-editorial-article {
	box-sizing: border-box;

	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 0;

	color: var(--mtf-blog-ink, #202020);
}


/* BODY PARAGRAPHS */

html.mtf-editorial-blog
.mtf-editorial-article > p {
	margin: 0 0 1.4em;

	color: inherit;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0;
}


/* SERIES EYEBROW */

html.mtf-editorial-blog
.mtf-editorial-article > .mtf-editorial-eyebrow {
	margin: 0 0 34px;

	font-family: inherit;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .16em;

	text-align: center;
	text-transform: uppercase;
}


/* SECTION HEADINGS */

html.mtf-editorial-blog
.mtf-editorial-article > h2 {
	margin: 52px 0 22px;
	padding: 28px 0 0;

	border-top: 1px solid
		var(--mtf-blog-rule, rgba(0, 0, 0, .17));

	color: inherit;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.6rem, 2.5vw, 1.9rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -.015em;

	text-align: left;
	text-transform: none;
}


/* LINKS WITHIN ARTICLES */

html.mtf-editorial-blog
.mtf-editorial-article a {
	color: inherit;

	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}


/* OPTIONAL PULL QUOTES FOR FUTURE ARTICLES */

html.mtf-editorial-blog
.mtf-editorial-article > .mtf-editorial-pullquote {
	box-sizing: border-box;

	margin: 44px auto;
	padding: 30px 20px;

	border-top: 1px solid
		var(--mtf-blog-rule, rgba(0, 0, 0, .17));
	border-bottom: 1px solid
		var(--mtf-blog-rule, rgba(0, 0, 0, .17));
	border-left: 0;
	border-right: 0;

	text-align: center;
}

html.mtf-editorial-blog
.mtf-editorial-article
.mtf-editorial-pullquote p {
	margin: 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.35rem, 2.8vw, 1.85rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.4;
}


/* SERIES FOOTER */

html.mtf-editorial-blog
.mtf-editorial-article
.mtf-editorial-series {
	margin: 52px 0 0;
	padding: 26px 0 0;

	border-top: 1px solid
		var(--mtf-blog-rule, rgba(0, 0, 0, .17));

	text-align: center;
}

html.mtf-editorial-blog
.mtf-editorial-article
.mtf-editorial-series h2 {
	margin: 0 0 10px;
	padding: 0;

	border: 0;

	color: inherit;

	font-family: inherit;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .12em;

	text-align: center;
	text-transform: uppercase;
}

html.mtf-editorial-blog
.mtf-editorial-article
.mtf-editorial-series p {
	max-width: 520px;
	margin: 0 auto;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
}


/* MOBILE */

@media (max-width: 767px) {

	html.mtf-editorial-blog
	.mtf-editorial-article > p {
		font-size: 1.0625rem;
		line-height: 1.65;
	}

	html.mtf-editorial-blog
	.mtf-editorial-article > .mtf-editorial-eyebrow {
		margin-bottom: 28px;
	}

	html.mtf-editorial-blog
	.mtf-editorial-article > h2 {
		margin-top: 40px;
		margin-bottom: 18px;
		padding-top: 24px;
	}

	html.mtf-editorial-blog
	.mtf-editorial-article
	.mtf-editorial-series {
		margin-top: 42px;
	}

}


/* ==================================================
   SOURCE: css/journal-related.css
   ================================================== */


/* =========================================================
	 MARK THOMAS FILMS — OTHER ARTICLES
	 Same light-gray, centered visual language as Related Films;
	 three compact cards, no carousel or pagination controls.
	 ========================================================= */

.mtf-blog-related {
	position: relative;
	left: 50%;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	margin: 0 0 0 -50vw;
	padding: clamp(48px, 5vw, 74px) 24px;
	background: var(--mtf-color-faint, #f2f2f2);
	color: var(--mtf-section-text, #1b1b1b);
}

/* Position relative to the actual containing block even if the
	 recommendations sit inside Squarespace's narrower article. */
.mtf-blog-related {
	left: 50%;
	transform: none;
}

.mtf-blog-related__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mtf-content-width, 1180px);
	margin: 0 auto;
}

.mtf-blog-related__heading {
	margin: 0 0 clamp(24px, 3.2vw, 38px);
	text-align: center;
}

.mtf-blog-related__eyebrow {
	display: block;
	margin: 0 0 6px;
	font-size: .69rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .62;
}

.mtf-blog-related__title {
	margin: 0;
	font-family: inherit;
	font-size: clamp(1.6rem, 2.65vw, 2.15rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.015em;
	text-transform: none;
}

.mtf-blog-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.8vw, 38px);
	align-items: start;
}

.mtf-blog-related__grid[data-count="1"] {
	grid-template-columns: minmax(0, 370px);
	justify-content: center;
}

.mtf-blog-related__grid[data-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 370px));
	justify-content: center;
}

.mtf-blog-related__card {
	min-width: 0;
}

.mtf-blog-related__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--mtf-radius, 5px);
	background: #dedede;
	color: inherit;
	text-decoration: none;
}

.mtf-blog-related__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: none;
}

.mtf-blog-related__media--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #e9e9e9, #d9d9d9);
	color: #777;
	font-size: .67rem;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.mtf-blog-related__body {
	padding-top: 14px;
	text-align: left;
}

.mtf-blog-related__meta {
	margin: 0 0 8px;
	font-size: .66rem;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .6;
}

.mtf-blog-related__card-title {
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.15rem, 1.55vw, 1.42rem);
	font-weight: 400;
	line-height: 1.27;
	letter-spacing: -.01em;
	text-transform: none;
}

.mtf-blog-related__card-title a {
	color: inherit;
	text-decoration: none;
}

.mtf-blog-related__card-title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mtf-blog-related__excerpt {
	margin: 10px 0 0;
	font-size: .86rem;
	line-height: 1.55;
	opacity: .75;
}

.mtf-blog-related__footer {
	margin-top: clamp(24px, 3.4vw, 40px);
	text-align: center;
}

.mtf-blog-related__all {
	display: inline-block;
	color: inherit;
	font-size: .81rem;
	line-height: 1.6;
	font-weight: 500;
	letter-spacing: .025em;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 180ms ease;
}

.mtf-blog-related__all:hover,
.mtf-blog-related__all:focus-visible {
	border-bottom-color: currentColor;
}

.mtf-blog-related a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media (max-width: 900px) {
	.mtf-blog-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mtf-blog-related__grid[data-count="1"] {
		grid-template-columns: minmax(0, 370px);
	}
}

@media (max-width: 600px) {
	.mtf-blog-related {
		padding: 42px 18px;
	}

	.mtf-blog-related__grid,
	.mtf-blog-related__grid[data-count="1"],
	.mtf-blog-related__grid[data-count="2"] {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.mtf-blog-related__media {
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtf-blog-related__all {
		transition: none;
	}
}


/* ==================================================
   SOURCE: css/journal-series-header.css
   ================================================== */


/* =========================================================
	 MARK THOMAS FILMS
	 BLOG SERIES HEADER

	 Optional series label above the native article H1.
	 ========================================================= */

html.mtf-editorial-blog
.blog-item-top-wrapper > .mtf-multi-part-series {
	display: block;
	width: 100%;

	margin: 0 0 20px;
	padding: 0;

	color: var(--mtf-blog-ink, #202020);

	font-family: inherit;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .18em;

	text-align: center;
	text-transform: uppercase;
}


/* MOBILE */

@media (max-width: 767px) {

	html.mtf-editorial-blog
	.blog-item-top-wrapper > .mtf-multi-part-series {
		margin-bottom: 16px;
		font-size: .66rem;
		letter-spacing: .12em;
	}

}


/* ==================================================
   SOURCE: css/mtf-photo-video-quote.css
   ================================================== */

/* ==================================================
	 PHOTO + VIDEO QUOTE BUILDER
	 ================================================== */

.fe-block:has(#mtf-photo-video-quote) {
	grid-column: 2 / -2 !important;
}

.fe-block:has(#mtf-photo-video-quote) .sqs-block {
	width: 100%;
}

.fe-block:has(#mtf-photo-video-quote) .sqs-block-content {
	width: 100%;
}

#mtf-photo-video-quote {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

/* ==================================================
   SOURCE: css/reviews.css
   ================================================== */

/* =========================================================
	 REVIEW CAROUSEL
	 ========================================================= */

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.user-items-list-carousel__slide {
	padding: 0 !important; /* Squarespace sets padding inline */
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	transition:
		box-shadow 0.3s ease,
		translate 0.3s ease,
		opacity 0.3s ease;
}


/* =========================================================
	 REVIEW CAROUSEL — 16:9 IMAGE
	 ========================================================= */

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.user-items-list-carousel__media-container {
	width: 100%;
	margin-bottom: 0 !important; /* Squarespace sets margin inline */
	overflow: hidden;
}

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.user-items-list-carousel__media-inner {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	padding-bottom: 0;
	overflow: hidden;
}

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.user-items-list-carousel__media {
	position: absolute;
	inset: 0;
	display: block;
	transform: scale(1);
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
	 REVIEW CAROUSEL — HOVER
	 ========================================================= */

@media (hover: hover) {

	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__slide:hover {
		translate: 0 -4px;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
	}

	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__slide:hover
	.user-items-list-carousel__media {
		transform: scale(1.045);
	}

}


/* =========================================================
	 REVIEW CAROUSEL — CONTENT
	 ========================================================= */

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.list-item-content {
	padding: 26px 32px 28px;
}

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.list-item-content__text-wrapper {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
}


/* =========================================================
	 REVIEW CAROUSEL — REVIEW COPY
	 ========================================================= */

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.list-item-content__description {
	order: 1;
	max-width: none;
	margin-top: 0 !important; /* Squarespace sets margin inline */
	padding-left: 14px;
	padding-right: 14px;
	font-size: 0.98rem;
	font-weight: 400;
	line-height: 1.65;
}

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.list-item-content__description p {
	position: relative;
	margin: 0;
}


/* =========================================================
	 REVIEW CAROUSEL — FIVE STARS
	 ========================================================= */

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.list-item-content__description::before {
	content: "★★★★★";
	display: block;
	margin-bottom: 17px;
	color: #fbbc04;
	font-family: Arial, sans-serif;
	font-size: 0.95rem;
	line-height: 1;
	letter-spacing: 0.14em;
}


/* =========================================================
	 REVIEW CAROUSEL — QUOTE MARK
	 ========================================================= */

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.list-item-content__description p::before {
	content: "“";
	position: absolute;
	left: -18px;
	top: -12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.1rem;
	line-height: 1;
	text-align: left;
	opacity: 0.12;
	pointer-events: none;
}


/* =========================================================
	 REVIEW CAROUSEL — COUPLE NAME
	 ========================================================= */

.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
.list-item-content__title {
	order: 2;
	width: 100%;
	max-width: none;
	margin: 20px 0 0;
	text-align: right;
	font-size: 0.78rem !important;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}


/* =========================================================
	 REVIEW SECTION TITLE
	 ========================================================= */

.user-items-list
.list-section-title[id="6a94aa25f4ec927f5a6d55ce"] {
	text-align: left;
}

.user-items-list
.list-section-title[id="6a94aa25f4ec927f5a6d55ce"] p {
	margin: 0;
}





/* =========================================================
	 MOBILE — REVIEW CAROUSEL
	 ========================================================= */

@media screen and (max-width: 767px) {

	/* One readable review card at a time */
	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__slides {
		grid-template-columns: repeat(1, 1fr);
	}


	/* Expose part of the neighboring slides as a swipe cue */
	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__slides-revealer {
		width: 88%;
		max-width: 88%;
		margin-left: auto;
		margin-right: auto;
		overflow: visible;
	}


	/* Prevent carousel from overflowing the page */
	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__gutter {
		overflow: hidden;
	}


	/* Neighboring slides are visible but subdued */
	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__slide[aria-hidden="true"] {
		opacity: 0.55;
	}

	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.user-items-list-carousel__slide:not([aria-hidden="true"]) {
		opacity: 1;
	}


	/* Review content spacing */
	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.list-item-content {
		padding: 24px 22px 26px;
	}

	.user-items-list-item-container[data-section-id="6a94aa25f4ec927f5a6d55ce"]
	.list-item-content__description {
		padding-left: 12px;
		padding-right: 12px;
	}

}





/* ==================================================
   SOURCE: css/sections.css
   ================================================== */

/* MARK THOMAS FILMS — REUSABLE SECTIONS, EXTRACTED FROM site.css */

/* =========================================================
	 STANDARD CONTENT SECTIONS
	 ========================================================= */

.mtf-section {
	--mtf-section-bg: transparent;
	--mtf-section-text: inherit;
	--mtf-section-muted: rgba(0, 0, 0, 0.58);
	--mtf-section-rule: rgba(0, 0, 0, 0.18);
	--mtf-section-faint: rgba(0, 0, 0, 0.12);

	box-sizing: border-box;

	width: 100%;

	margin: 0;

	padding:
		var(--mtf-section-space)
		var(--mtf-section-gutter);

	background:
		var(--mtf-section-bg);

	color:
		var(--mtf-section-text);
}


/* =========================================================
	 SECTION THEMES
	 ========================================================= */

 .mtf-section--white {
		 --mtf-section-bg: var(--mtf-color-background);
		 --mtf-section-text: var(--mtf-color-text);
		 --mtf-section-muted: var(--mtf-color-muted);
		 --mtf-section-rule: var(--mtf-color-rule);
		 --mtf-section-faint: var(--mtf-color-faint);
 }
 
.mtf-section--light {
	--mtf-section-bg: var(--mtf-color-surface);
	--mtf-section-text: var(--mtf-color-text);
	--mtf-section-muted: var(--mtf-color-muted);
	--mtf-section-rule: var(--mtf-color-rule);
	--mtf-section-faint: var(--mtf-color-faint);
}


.mtf-section--dark {
	--mtf-section-bg: var(--mtf-color-dark);
	--mtf-section-text: #fff;
	--mtf-section-muted: rgba(255, 255, 255, 0.62);
	--mtf-section-rule: rgba(255, 255, 255, 0.3);
	--mtf-section-faint: rgba(255, 255, 255, 0.18);
}



/* =========================================================
	 OPTIONAL SECTION INNER CONTAINER
	 ========================================================= */

.mtf-section__inner {
	box-sizing: border-box;

	width: 100%;
	max-width: var(--mtf-content-width);

	margin-inline: auto;
}


/* =========================================================
	 STANDARD SECTION HEADING
	 ========================================================= */

.mtf-section__heading {
	width: 100%;
	max-width: 760px;

	margin:
		0 auto
		clamp(34px, 3.5vw, 44px);

	text-align: center;
}


/* =========================================================
	 STANDARD SECTION EYEBROW
	 ========================================================= */

.mtf-section__eyebrow {
	margin:
		0 0 10px;

	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.2;

	letter-spacing: 0.2em;
	text-transform: uppercase;

	color:
		var(--mtf-section-muted);
}


/* =========================================================
	 STANDARD SECTION TITLE
	 ========================================================= */

.mtf-section__title {
	margin: 0;

	font-size: clamp(
		1.45rem,
		1.8vw,
		1.9rem
	);

	font-weight: 500;
	line-height: 1.2;

	letter-spacing: 0.035em;
	text-transform: uppercase;

	color:
		var(--mtf-section-text);
}


/* =========================================================
	 STANDARD SECTION DESCRIPTION
	 ========================================================= */

.mtf-section__description {
	max-width: 640px;

	margin:
		14px auto 0;

	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.55;

	color:
		var(--mtf-section-muted);
}


/* =========================================================
	 MOBILE — STANDARD SECTIONS
	 ========================================================= */

@media screen and (max-width: 767px) {

	.mtf-section {
		padding:
			var(--mtf-section-space)
			var(--mtf-section-gutter);
	}


	.mtf-section__heading {
		margin-bottom: 30px;
	}


	.mtf-section__title {
		font-size: 1.4rem;
	}


	.mtf-section__description {
		margin-top: 12px;

		font-size: 0.9rem;
	}

}

/* Reusable aliases and modifiers; markup determines heading level. */
.mtf-section__container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mtf-content-width);
  margin-inline: auto;
}
.mtf-section__container--narrow { max-width: var(--mtf-reading-width); }
.mtf-section--compact {
  padding-block: clamp(36px, 4vw, 56px);
}
.mtf-section__heading--left {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.mtf-section__title--display {
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: none;
}
.mtf-section__title--subsection {
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-transform: none;
}
.mtf-section__prose {
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
}
.mtf-section__prose p { margin: 0 0 1.15em; }
.mtf-section__prose p:last-child { margin-bottom: 0; }


/* ==================================================
   SOURCE: css/site.css
   ================================================== */

/* Site-level overrides not covered by the shared design system. */

/* =========================================================
	 MOBILE HEADER
	 ========================================================= */

.header-title.header-title--use-mobile-logo {
	padding-right: 40px;
}

/* ==================================================
   SOURCE: css/tokens.css
   ================================================== */

/* MARK THOMAS FILMS — SHARED DESIGN TOKENS
 * These defaults reproduce the site's existing section styling.
 * Change a token here instead of redefining it in individual modules.
 * Squarespace's native theme styles remain untouched.
 */
:root {
  --mtf-color-text: #1a1a1a;
  --mtf-color-muted: #777;
  --mtf-color-faint: #dedede;
  --mtf-color-background: #ffffff;
  --mtf-color-surface: #f5f5f5;
  --mtf-color-rule: #c8c8c8;
  --mtf-color-dark: #171717;
  --mtf-content-width: 1180px;
  --mtf-reading-width: 760px;
  --mtf-section-gutter: clamp(22px, 6vw, 96px);
  --mtf-section-space: clamp(52px, 5vw, 72px);
  --mtf-radius: 5px;
}
@media screen and (max-width: 767px) {
  :root {
    --mtf-section-gutter: 22px;
    --mtf-section-space: 46px;
  }
}


/* ==================================================
   SOURCE: css/typography.css
   ================================================== */


/* =========================================================
	 MARK THOMAS FILMS — GLOBAL TYPOGRAPHY

	 One consistent H1 size across the entire website.

	 This file should be loaded after the individual
	 page stylesheets.
	 ========================================================= */


/* =========================================================
	 GLOBAL HEADING VARIABLES
	 ========================================================= */

:root {
	--mtf-h1-size: 2.6rem;
	--mtf-h1-mobile-size: clamp(1.875rem, 6vw, 2.25rem);
}


/* =========================================================
	 ALL H1 HEADINGS

	 The single authoritative size rule for the website.

	 Important is intentional here: Squarespace and our
	 older stylesheets have competing H1 declarations.
	 ========================================================= */

html body h1 {
	font-size: var(--mtf-h1-size);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.025em;
}


/* =========================================================
	 MOBILE H1 HEADINGS
	 ========================================================= */

@media (max-width: 767px) {

	html body h1 {
		font-size: var(--mtf-h1-mobile-size);
	}

}