/* ==========================================================================
   Letter From the Founder
   Served standalone from /_files/css/founderletter.css

   Lives inside a CMS wysiwyg row, so the rendered tree is:
     .section > .section__container > .type > .founder
   Those three wrappers are generated by the CMS and cannot take classes, so
   the row is neutralized with :has() instead. Selectors carry two classes to
   outrank the .type h2 / .type p defaults without needing !important.

   Colors come from default.css: --primary #18597c, --secondary #00a887.
   ========================================================================== */

/* Release the artwork from the row's padding and 70rem container so it can
   run edge to edge. Without :has() support the block simply stays inside the
   container, which degrades cleanly rather than breaking. */
.section:has(.founder) {
	 padding-top: 0;
	 padding-right: 0;
	 padding-bottom: 0;
	 padding-left: 0;
}
 .section:has(.founder) .section__container {
	 width: 100%;
	 max-width: none;
}

.founder {
	 --founder-heading: #303d3b;
	 --founder-body: #333;
	 /* Clearance for the sticky navbar when the photo pins. Tune here. */
	 --founder-sticky-top: 6rem;
	 position: relative;
	 isolation: isolate;
	 /* clip, not hidden: hidden would make this a scroll container and stop
	    the photo below from sticking. */
	 overflow: clip;
	 /* Resets the white text inherited from background-primary */
	 color: var(--founder-body);
}

/* Wood grain, anchored left so the darkest grain stays behind the photo
   and the lightest edge stays behind the letter. */
 .founder .founder__bg {
	 position: absolute;
	 inset: 0;
	 z-index: -2;
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 object-position: left center;
}

/* Scrim keeps the letter legible even if the supplied art has no fade baked
   in: vertical on small screens where the letter sits below the photo,
   horizontal on wide screens where it sits beside it. */
 .founder::after {
	 content: "";
	 position: absolute;
	 inset: 0;
	 z-index: -1;
	 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, .93) 58%, #fff 100%);
}
 @media(min-width: 760px) {
	 .founder::after {
		 background: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .75) 58%, rgba(255, 255, 255, .88) 100%);
	}
}

/* Re-establish the page's content width inside the full-bleed panel */
 .founder .founder__inner {
	 display: grid;
	 gap: 2rem;
	 align-items: center;
	 width: 100%;
	 max-width: 70rem;
	 margin: 0 auto;
	 padding: 3.25rem 1.5rem;
}
 @media(min-width: 760px) {
	 .founder .founder__inner {
		 grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		 gap: 2.5rem;
		 padding: 4rem 1.5rem;
	}
}
/* The letter takes the larger share: long letters read better on a wider
   measure, and it keeps the section from running unnecessarily tall. */
 @media(min-width: 990px) {
	 .founder .founder__inner {
		 grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		 gap: 3rem;
		 padding: 4.5rem 1.5rem;
	}
}

/* Photo ------------------------------------------------------------------- */

/* The PSD exports a 1:1 canvas with the polaroid frame, tilt, paw print and
   shadow already composited, so this only sizes and centers it. The wrapper
   keeps the grid intact if the editor wraps the image in a paragraph. */
 .founder .founder__figure {
	 margin: 0;
}
/* On a long letter the photo would otherwise sit marooned in the middle of a
   tall field of wood, so it pins and travels alongside the text instead.
   align-self: start gives it the room to travel within its grid area. */
 @media(min-width: 760px) {
	 .founder .founder__figure {
		 position: sticky;
		 top: var(--founder-sticky-top);
		 align-self: start;
	}
}
 .founder .founder__photo {
	 display: block;
	 width: 100%;
	 max-width: 24rem;
	 aspect-ratio: 1;
	 object-fit: contain;
	 margin: 0 auto;
}
/* Two up: fill the grid column rather than stopping at a fixed width, so the
   photo scales with the container instead of shrinking away on wide screens. */
 @media(min-width: 760px) {
	 .founder .founder__photo {
		 max-width: 100%;
	}
}

/* Add this class to the photo only if the drop shadow is NOT baked into the
   export. filter follows the PNG alpha, so it shadows the tilted frame. */
 .founder .founder__photo_shadow {
	 filter: drop-shadow(0 16px 26px rgba(51, 38, 20, .26));
}

/* Letter ------------------------------------------------------------------ */

 .founder .founder__title {
	 display: inline-block;
	 margin: 0;
	 padding-bottom: .3em;
	 border-bottom: 5px solid hsl(var(--secondary));
	 color: var(--founder-heading);
	 font-family: var(--header-font-family);
	 font-size: clamp(1.5rem, 1.05rem + 1.4vw, 1.875rem);
	 font-weight: 500;
	 line-height: 1.15;
	 text-transform: uppercase;
}

 .founder .founder__salutation {
	 margin: 1.75rem 0 .6rem;
	 color: hsl(var(--primary));
	 font-family: var(--header-font-family);
	 font-size: 1.375rem;
	 font-weight: 700;
	 line-height: 1.3;
}

 .founder .founder__body {
	 color: var(--founder-body);
	 font-family: var(--default-font-family);
	 font-size: 1.125rem;
	 font-weight: 300;
	 line-height: 1.65;
}
/* font: inherit undoes the .type p defaults for whatever the brick emits */
 .founder .founder__body > p {
	 margin: 0 0 1.35em;
	 color: inherit;
	 font: inherit;
}
 .founder .founder__body > p:last-child {
	 margin-bottom: 0;
}

 .founder .founder__signoff {
	 margin: 1.65rem 0 0;
	 color: hsl(var(--secondary));
	 font-family: var(--header-font-family);
	 font-size: 1.375rem;
	 font-weight: 700;
	 line-height: 1.45;
}
 .founder .founder__signature {
	 display: block;
}