@charset "utf-8";

:root {
  --bg: rgb(255, 250, 245);
  --fg: #33251a;
  --fg-border: rgba(255,255,255, .4);
  --bg-border: rgba(51, 37, 26, .1);
  --serif: "Cormorant Garamond", Georgia, 'Times New Roman', Times, serif;
  --sans-serif: "Raleway", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;       }

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; color: inherit }
html, body { font-family: var(--sans-serif) }
html { font-size: 14px; scroll-behavior: smooth }
body { color: var(--fg); background: var(--bg) }

@media screen and (min-width: 480px) {
    html { font-size: 16px } }
@media screen and (min-width: 1024px) {
    html { font-size: 18px } }

h1, h2, h3, p, ul, ol, dl, figure { margin: 0 0 .9rem }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: .9; white-space: pre-wrap; }
h1 small, h2 small, h3 small { font-family: var(--sans-serif); font-weight: 400; font-size: .5em }
h1 { font-size: 3rem }
h2 { font-size: 2.75rem }
h3 { font-size: 1.75rem }
p, ul, ol, dl, figure { font-size: 1rem; line-height: 1.5 }
ul, ol { list-style-position: inside }
img { max-width: 100% }
details { margin: .5rem 0 }
summary { list-style: none; cursor: pointer; font-size: 1.25rem; font-weight: 700 }
details > p { padding: .5rem 0 0 .75rem }
.text-center { text-align: center }
.text-left { text-align: left }

.wrap { position: relative; max-width: 80rem; margin: 0 auto; padding: 1rem }
.wrap_copy { max-width: 60rem }
@media screen and (min-width: 1024px) {
    .wrap { padding: 2rem 1rem }
}

.stage { max-width: 30rem; padding: 3rem 2rem 1.5rem }
.stage_tall { padding: 5rem 2rem }
.stage_center { margin: 0 auto; text-align: center }
.stage_right { margin-left: auto }
@media screen and (min-width: 1024px) {
    .stage_tall { padding: 6rem 2rem } }

.main-menu {
    display: none; width: 100%; padding: 2rem 3rem; text-align: center;
    background: var(--fg); border-bottom: 1px solid rgba(255,255,255, .2) }
.main-menu a {
    display: inline-block; padding: .6125rem; letter-spacing: 1px;
    font-size: .75rem; color: var(--bg); text-decoration: none; text-transform: uppercase }

.main-menu-toggle { display: none }
.main-menu-toggle:checked + .main-menu { display: block }
.main-menu-toggler { position: absolute; top: 2.25rem; right: 1rem; width: 1.75rem; height: 1.75rem }

.brand { padding: 2rem 2.5rem; text-align: center; background: var(--fg) }
.brand-img { width: 20rem }

.page-cap { padding: 2px 0 .5rem; background: var(--fg); border-top: 3px solid var(--fg-border) }
.page-cap-stripe { border-bottom: 1px solid var(--fg-border) }

.hero {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding-bottom: 22.5%; text-align: center; color: var(--bg);
    background-image: url(/static/hero.jpg); background-size: cover; background-position: 0% 75% }
.hero-brand { width: 100%; flex-grow: 1; padding: 2rem 0 0 }
.hero-brand-img { width: 20rem }
.hero-callout { flex-grow: 1; padding-bottom: 0 }
.hero .stage { max-width: 36rem }
@media screen and (min-width: 480px) {
    .hero-brand-img { width: 24rem } }
@media screen and (min-width: 1280px) {
    .hero { padding-bottom: 16.5% } }

.cta {
    display: inline-block; margin: 1rem 0; padding: .5rem 1.5rem;
    text-decoration: none; font-size: 1rem; color: var(--fg); border: 1px solid var(--fg) }

.stripe { padding: 2rem; background: var(--fg); color: var(--bg); text-align: center }
.stripe .cta { color: var(--bg); border-color: var(--bg) }
@media screen and (min-width: 1024px) {
    .stripe { padding: 4rem 25% } }
@media screen and (min-width: 1920px) {
     .stripe { padding: 4rem 35% } }

.grid { overflow: hidden; margin: 0 -.5rem }
.grid-tile { display:block; position: relative; float:left; width: 100%; padding: .5rem }
.grid-tile-image { position: relative; overflow: hidden; background-color: rgb(250, 240, 235) }
.grid-tile-image > img { display: block; width: 100%; height: 100%; object-fit: cover }
.grid-tile-label { margin: 0; padding: .5rem; text-align: right; color: var(--bg); background: var(--fg) }
.grid-tile_square .grid-tile-image { aspect-ratio: 1/1; }
.grid-tile_portrait .grid-tile-image { aspect-ratio: 4/6 }
@media screen and (min-width: 640px) {
    .grid-tile { width: 50% } }
@media screen and (min-width: 1024px) {
    .grid-tile { width: 33.333% }
    .grid-tile_portrait { width: 25% } }

.signature { display:block; max-width: 200px; margin: 2rem auto }

.image-link-grid { overflow: hidden; margin: -1rem; padding: 2rem 0 }
.image-link-grid > a {
    display: block; width: 50%; float: left; padding: 0 0 50%;
    background-size: cover; background-position: center; }
@media(hover: hover) and (pointer: fine) {
    .image-link-grid > a:hover { transform: scale(1.075) }
}
@media screen and (min-width: 640px) {
    .image-link-grid > a { width: 25%; padding: 0 0 25% } }
@media screen and (min-width: 1024px) {
    .image-link-grid > a { width: 20%; padding: 0 0 20% } }

/* home page */
.content-split { overflow: hidden; padding-bottom: 3rem }
.content-split > img { max-width: 18rem }
.content-split > .stage { margin-top: 24rem }
.content-split img:nth-of-type(1) { position: absolute; top: 2rem; left: -2rem }
.content-split img:nth-of-type(2) { position: absolute; top: 4rem; right: -2rem }
@media screen and (min-width: 768px){
    .content-split > .stage { margin-top: 0 }
    .content-split img:nth-of-type(1) { left: -8rem }
    .content-split img:nth-of-type(2) { top: 8rem; right: -8rem } }
@media screen and (min-width: 1024px) {
    .content-split img:nth-of-type(1) { top: 13rem; left: -4rem }
    .content-split img:nth-of-type(2) { top: 4rem; right: -4rem } }
@media screen and (min-width: 1280px) {
    .content-split > img { max-width: 100% }
    .content-split img:nth-of-type(1) { left: -2rem }
    .content-split img:nth-of-type(2) { right: -2rem } }

.content-left-single { overflow: hidden }
.content-left-single img { width: 120%; max-width: none; margin: 0 -1rem }
@media screen and (min-width: 768px) {
    .content-left-single img { position: absolute; width: auto; max-width: 20rem; left: -3rem } }
@media screen and (min-width: 1024px) {
    .content-left-single img { max-width: 30rem; top: 6rem; left: -6rem } }
@media screen and (min-width: 1280px) {
    .content-left-single img { max-width: 100%; left: 4rem } }
@media screen and (min-width: 1440px) {
    .content-left-single img { left: 10rem } }

.content-right-stack { overflow: hidden }
.content-right-stack img:nth-of-type(1) { display: none }
.content-right-stack img:nth-of-type(2) { display: block; margin: 0 auto }
@media screen and (min-width: 768px) {
    .content-right-stack img:nth-of-type(2) { position: absolute; max-width: 20rem; top: 10rem; right: -4rem } }
@media screen and (min-width: 1024px) {
    .content-right-stack img:nth-of-type(2) { max-width: 100% } }
@media screen and (min-width: 1280px) {
    .content-right-stack img:nth-of-type(1) { display: block; position: absolute; top: 12rem; right: -4rem }
    .content-right-stack img:nth-of-type(2) { position: absolute; top: 3rem; right: 13rem } }
@media screen and (min-width: 1440px) {
    .content-right-stack img:nth-of-type(1) { right: 0 }
    .content-right-stack img:nth-of-type(2) { right: 17rem } }

.footer-logo { max-width: 8rem; margin-bottom: 1rem }

/* blog */
.post-preview { margin: 0 0 3rem }
.post-preview-tile { max-width: 100%; margin: 0 0 1rem; padding: .5rem; background: white; border: 1px solid var(--bg-border) }
.post-preview-tile-image {
    display: block; height: 0; position: relative; margin: 0 auto; padding-bottom: 66.6%;
    background-size: cover; background-position: top; background-repeat: no-repeat }
@media screen and (min-width: 640px) {
    .post-preview { display: flex; align-items: end }
    .post-preview-tile { width: 60%; margin: 0 1rem 0 }
    .post-preview-info { width: 40%; flex-grow: 1; text-align: right }
}

/* design dilemma */
.design-dilemma-lead > * { margin: 0 0 1rem }
@media screen and (min-width: 640px) {
    .design-dilemma-lead { display: flex; }
    .design-dilemma-lead { flex-direction: row-reverse }
    .design-dilemma-lead > *:last-child { flex-basis: 85%; padding: 0 2rem 0 0 }
}

.design-dilemma-grid { margin: 1rem 0 }
.design-dilemma-grid > .grid-tile > .grid-tile-label { margin: 0 0 1rem }
@media screen and (min-width: 1280px) {
    .design-dilemma-grid { margin: 2rem -6rem }
}