@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/res/font/lora-400.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 300; font-display: swap; src: url('/res/font/source-sans-pro-300-italic.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('/res/font/source-sans-pro-400.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('/res/font/source-sans-pro-600.ttf') format('truetype'); }

* { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; }
body { background: #fcf4f4; color: #707070; font-family: 'Source Sans Pro', sans-serif; font-size: 12px; -webkit-font-smoothing: antialiased; }
.center { display: block; margin: auto; }
.wide-width { width: 714px; }
.branding { padding: 120px 0 90px; text-align: center; }
.branding h1 { color: #707070; font-family: 'Lora', serif; font-size: 21px; font-weight: 300; line-height: 25px; }
.branding .sub { color: #707070; font-size: 13px; letter-spacing: .005em; line-height: 14px; margin-top: 5px; }

.photos { overflow: hidden; position: relative; text-align: center; }
.slider-frame { overflow-x: auto; padding-bottom: 30px; scrollbar-width: none; }
.slider-frame::-webkit-scrollbar { display: none; }
.slider { display: flex; gap: 200px; padding: 42px calc(50vw - 325px) 42px; width: max-content; }
.slider .element { background: none; border: 0; cursor: pointer; flex: none; height: 370px; }
.slider .element img { box-shadow: 0 10px 48px -24px rgba(0,0,0,.65); height: 370px; max-width: 650px; object-fit: cover; }
.slider-control { margin-top: -30px; position: relative; z-index: 2; }
.slider-control .hint-text { color: #707070; letter-spacing: .006em; margin: 0 83px; }
.slider-control button { background: none; border: 0; cursor: pointer; height: 50px; vertical-align: middle; width: 50px; }
.slider-control button img { height: 12px; width: 12px; }
.slider-control .point-left img { transform: rotate(180deg); }
.slider-control button:disabled { opacity: .3; }

.story { padding-top: 160px; }
.typography h2 { color: #707070; font-family: 'Lora', serif; font-size: 21px; font-weight: 300; margin-bottom: 22px; }
.typography p { font-size: 14px; letter-spacing: -.01em; line-height: 20px; margin-bottom: 18px; }
.link { color: #e95858; display: inline-block; font-size: 13px; letter-spacing: .017em; margin-top: 15px; }
.link::after { content: ' ↗'; }
.downloads { align-items: flex-start; display: flex; margin-top: 90px; }
.downloads > img { margin: 4px 28px 0 0; width: 25px; }
.downloads .links { display: grid; }
.downloads .link { margin: 0 0 9px; }
.downloads-hint { font-size: 11px; line-height: 16px; margin: 23px 0 0 53px; max-width: 500px; }

.color-chart { margin-top: 120px; width: 100%; }
.color-list { display: grid; grid-template-columns: repeat(5, 1fr); }
.color { min-height: 110px; overflow: hidden; position: relative; }
.color .fill { height: 78px; width: 100%; }
.color span { display: block; font-size: 10px; padding: 7px; }
.color.logo { align-items: center; background: #fff; display: flex; justify-content: center; }
.color.logo img { max-width: 80%; }

.contact { background: #fff; margin-top: 140px; padding: 110px 0 125px; text-align: center; }
.contact .typography { margin-bottom: 70px; text-align: left; }
.website-field { display: none !important; }
.row { display: flex; gap: 42px; margin-bottom: 42px; }
.row .element { flex: 1; }
.element { display: flex; flex-direction: column-reverse; text-align: left; }
.element label { font-size: 11px; margin: 8px 0 0 8px; }
.field { background: #fafafa; border: 0; border-radius: 8px; font: inherit; outline: none; padding: 0 20px; width: 100%; }
input.field { height: 42px; }
textarea.field { background: linear-gradient(200deg,#fafafa,#f2fafa); height: 178px; padding: 20px; resize: vertical; }
.field:focus { box-shadow: 0 0 0 1px #e95858; }
button.link { background: none; border: 0; cursor: pointer; font-family: inherit; }
button.link::after { content: ''; }
.form-status { min-height: 18px; margin-top: 18px; }
footer { background: #fff; padding-bottom: 25px; text-align: center; }

@media (max-width: 768px) {
  .wide-width { width: 100%; }
  .branding { padding: 65px 20px 60px; }
  .branding h1 { font-size: 18px; }
  .slider { gap: 35px; padding: 25px 12px 35px; }
  .slider .element, .slider .element img { height: 58vw; max-height: 370px; max-width: 88vw; }
  .slider-control .hint-text { margin: 0 24px; }
  .story { padding: 100px 18px 0; }
  .color-list { grid-template-columns: repeat(3, 1fr); }
  .contact { margin-top: 100px; padding: 80px 14px; }
  .row { display: block; margin-bottom: 0; }
  .row .element { margin-bottom: 32px; }
  .field { background: #dbe5e6; border-radius: 0; }
}