/* Fernlea Shore: white editorial, for photographers. */

:root { --ft-gutter: 40px; --ft-max: 1360px; }
@media (max-width: 960px) { :root { --ft-gutter: 24px; } }

body { font-weight: 300; font-size: 15.5px; line-height: 1.75; }

/* Type */
.ft-display { font-family: var(--ft-head); font-weight: 400; font-size: clamp(48px, 6.7vw, 96px); line-height: 1; letter-spacing: -.015em; }
.ft-display em, .ft-h2 em, .ft-statement__text em, .ft-plain-head__title em { font-family: var(--ft-accent-font); font-style: italic; letter-spacing: 0; }
.ft-display--section { font-size: clamp(44px, 5.3vw, 76px); line-height: 1.02; }
.ft-h2 { font-family: var(--ft-head); font-weight: 400; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.08; }
.ft-h2--large { font-size: clamp(40px, 5vw, 72px); line-height: 1.04; }
.ft-body { color: var(--ft-muted); }
.ft-small { font-size: 13px; color: var(--ft-accent); }
.ft-caps { font-weight: 500; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; }
.ft-muted { color: var(--ft-accent); }
.ft-italic { font-family: var(--ft-accent-font); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ft-signature { font-family: var(--ft-accent-font); font-style: italic; font-size: 40px; line-height: 1.1; margin-top: 30px; }
.ft-section { padding-block: clamp(90px, 10.4vw, 150px); }

/* Buttons and links */
.ft-btn { font-weight: 500; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; padding: 18px 32px; min-height: 52px; }
.ft-btn--primary { background: var(--ft-primary); color: var(--ft-on-primary); }
.ft-btn--outline { color: var(--ft-text); }
.ft-btn--light { background: #fff; color: #141414; }
.ft-link { font-weight: 500; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; }

/* Header */
.ft-header { background: var(--ft-bg); }
.ft-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; padding: 28px 0; }
.ft-logo { grid-column: 2; grid-row: 1; justify-self: center; }
.ft-logo__text { font-family: var(--ft-head); font-size: 30px; letter-spacing: .02em; line-height: 1; }
.ft-nav { display: contents; }
.ft-nav__list { gap: 34px; }
.ft-nav__list a { font-weight: 500; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; }
.ft-nav__list a[aria-current="page"] { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.ft-nav__list--left { grid-column: 1; grid-row: 1; }
.ft-nav__right { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: baseline; gap: 34px; }
.ft-nav__cta { color: var(--ft-text); }
@media (max-width: 960px) {
	.ft-header__inner { padding: 20px 0; }
	.ft-nav { display: flex; }
	.ft-nav__right { flex-direction: column; gap: 28px; }
	.ft-nav .ft-nav__list a { font-size: 13px; }
	.ft-menu-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
	.ft-logo__text { font-size: 24px; }
}

/* Hero */
.ft-hero { min-height: clamp(560px, 92vh, 880px); display: grid; place-items: center; padding: 90px 0; --ft-ov-top: .15; --ft-ov-bottom: .5; }
.ft-hero .ft-display { color: #fff; max-width: 1080px; margin-inline: auto; }
.ft-hero--empty .ft-display { color: var(--ft-on-dark); }
.ft-hero .ft-btn { margin-top: 36px; }
.ft-hero__caption { position: absolute; left: var(--ft-gutter); bottom: 32px; font-family: var(--ft-accent-font); font-style: italic; font-size: 17px; color: #fff; }

/* Statement */
.ft-statement__text { font-family: var(--ft-head); font-weight: 400; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.3; max-width: 1000px; margin-inline: auto; }
.ft-statement__body { max-width: 640px; margin: 28px auto 0; }

/* Selected work */
.ft-work { padding-bottom: clamp(90px, 10.4vw, 150px); }
.ft-rule-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--ft-text); margin-bottom: 48px; }
.ft-rule-head--plain { border-bottom: 0; padding-bottom: 0; margin-bottom: 56px; }
.ft-work__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ft-work__col { display: grid; gap: 56px; align-content: start; }
.ft-work__col:nth-child(2) { padding-top: 160px; }
.ft-work__item { margin: 0; }
.ft-work__item .ft-fill { border-radius: var(--ft-radius); }
.ft-work__caption { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 18px; }
.ft-work__caption > span:first-child { display: grid; gap: 4px; }
.ft-work__title { font-family: var(--ft-head); font-size: 28px; line-height: 1.2; }
.ft-work__caption .ft-italic { font-size: 16px; color: var(--ft-accent); }
.ft-work__caption .ft-caps { color: var(--ft-accent); }

/* Full-bleed photo pair */
.ft-band { display: grid; grid-template-columns: 1fr 460px; gap: 8px; height: 620px; }
.ft-band--single { grid-template-columns: 1fr; }
.ft-band .ft-fill { border-radius: 0; }

/* Featured experiences */
.ft-featured__head { margin-bottom: 70px; }
.ft-featured__head .ft-body { max-width: 600px; margin: 18px auto 0; }
.ft-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ft-col__image { aspect-ratio: 427 / 560; }
.ft-col__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 28px 0 16px; border-bottom: 1px solid var(--ft-line); margin-bottom: 18px; }
.ft-col__title { font-family: var(--ft-head); font-weight: 400; font-size: 32px; line-height: 1.1; }
.ft-col__title .ft-italic { color: var(--ft-accent); }
.ft-col .ft-body { margin-bottom: 22px; }

/* About */
.ft-meet { display: grid; grid-template-columns: minmax(0, 640px) 1fr; background: var(--ft-surface); }
.ft-meet__photo { min-height: 820px; border-radius: 0; }
.ft-meet__text { padding: 90px clamp(24px, 8.3vw, 120px); align-self: center; }
.ft-meet__text .ft-h2 { margin: 26px 0 28px; }
.ft-stats { display: flex; flex-wrap: wrap; gap: 24px 56px; margin: 40px 0 10px; }
.ft-stats li { display: grid; gap: 4px; }
.ft-stats strong { font-family: var(--ft-head); font-weight: 400; font-size: 40px; line-height: 1; }
.ft-stats .ft-caps { font-size: 9.5px; }
.ft-meet__text .ft-small { margin-top: 18px; }
.ft-meet__text .ft-btn { margin-top: 36px; }

/* Testimonials */
.ft-testimonials { padding-inline: clamp(0px, 8vw, 140px); }
.ft-testimonials .ft-slider { margin-top: 34px; }
.ft-quote__text p { font-family: var(--ft-head); font-size: clamp(28px, 3.5vw, 50px); line-height: 1.25; max-width: 1080px; margin-inline: auto; }
.ft-quote__text em { font-family: var(--ft-accent-font); }
.ft-quote__by { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 36px; font-weight: 500; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; }
.ft-quote__detail::before { content: "·"; margin-right: 12px; }
.ft-slider__controls { justify-content: center; }
.ft-slider__arrow { border: 0; width: auto; }

/* Featured in */
.ft-logos { border-top: 1px solid var(--ft-line); border-bottom: 1px solid var(--ft-line); padding: 38px 0; }
.ft-logos__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.ft-logos__list { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 56px; flex: 1; justify-content: space-between; }
.ft-logos__list li { font-family: var(--ft-head); font-size: 21px; color: var(--ft-accent); }
.ft-logos__list img { max-height: 34px; width: auto; filter: grayscale(1); opacity: .7; }

/* Journal */
.ft-post__image { display: block; aspect-ratio: 427 / 360; margin-bottom: 18px; }
.ft-post__title { font-family: var(--ft-head); font-weight: 400; font-size: 26px; line-height: 1.25; margin-top: 10px; }
.ft-post__title a { text-decoration: none; }

/* Enquiry call to action */
.ft-cta__inner { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: clamp(48px, 5.6vw, 80px); align-items: center; }
.ft-cta__photo { aspect-ratio: 520 / 640; }
.ft-cta .ft-body { max-width: 520px; margin: 28px 0 40px; }

/* Instagram */
.ft-insta__handle { font-size: 20px; margin-bottom: 24px; }
.ft-insta__handle a { text-decoration: none; }
.ft-insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ft-insta__grid li { aspect-ratio: 235 / 240; border-radius: 0; }
@media (max-width: 760px) { .ft-insta__grid { grid-template-columns: repeat(3, 1fr); } }

/* Page header */
.ft-page-hero { min-height: 640px; display: grid; place-items: center; padding: 90px 0; --ft-ov-top: .2; --ft-ov-bottom: .5; }
.ft-page-hero .ft-display { color: #fff; }
.ft-page-hero--empty .ft-display { color: var(--ft-on-dark); }

/* Experience rows */
.ft-rows { padding-top: 20px; }
.ft-row { display: grid; grid-template-columns: minmax(0, 760px) 1fr; gap: clamp(48px, 7vw, 100px); align-items: center; margin-bottom: clamp(90px, 10.4vw, 150px); scroll-margin-top: 40px; }
.ft-row--reverse { grid-template-columns: 1fr minmax(0, 760px); }
.ft-row--reverse .ft-row__image { order: 2; }
.ft-row__image { aspect-ratio: 760 / 900; }
.ft-row__title { font-family: var(--ft-head); font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.05; margin-bottom: 22px; }
.ft-row__title .ft-italic { color: var(--ft-accent); }
.ft-row__label { margin: 36px 0 12px; }
.ft-row__list { border-bottom: 1px solid var(--ft-line); }
.ft-row__list li { border-top: 1px solid var(--ft-line); padding: 14px 0; font-size: 15px; color: var(--ft-text); }
.ft-row__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 32px 0 28px; }
.ft-row__price .ft-italic { font-size: 20px; color: var(--ft-accent); }
.ft-row__amount { font-family: var(--ft-head); font-size: 34px; }
.ft-row__price .ft-caps { flex-basis: 100%; }

/* Packages */
.ft-packages__head .ft-body { max-width: 600px; margin: 18px auto 0; }
.ft-packages__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; margin-top: 56px; }
.ft-package { border: 1px solid var(--ft-line); padding: 44px 36px; display: flex; flex-direction: column; border-radius: var(--ft-radius); }
.ft-package--highlight { background: var(--ft-dark); color: var(--ft-on-dark); border-color: var(--ft-dark); }
.ft-package__badge { font-weight: 500; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ft-on-dark-soft); margin-bottom: 14px; }
.ft-package__name { font-family: var(--ft-head); font-weight: 400; font-size: 30px; }
.ft-package__price { font-family: var(--ft-head); font-size: 48px; margin-top: 10px; }
.ft-package__price span { font-family: var(--ft-accent-font); font-style: italic; font-size: 18px; color: var(--ft-accent); }
.ft-package__text { margin-top: 10px; color: var(--ft-muted); }
.ft-package--highlight .ft-package__text, .ft-package--highlight .ft-package__price span { color: var(--ft-on-dark-muted); }
.ft-package__list { margin: 24px 0 32px; flex: 1; }
.ft-package__list li { border-top: 1px solid var(--ft-line); padding: 12px 0; font-size: 14.5px; }
.ft-package--highlight .ft-package__list li { border-color: var(--ft-line-dark); }
.ft-package .ft-btn { align-self: flex-start; }

/* FAQ */
.ft-faq__inner { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: clamp(40px, 7vw, 100px); }
.ft-faq__list { border-bottom: 1px solid var(--ft-line); }
.ft-faq__item { border-top: 1px solid var(--ft-line); padding: 26px 0; }
.ft-faq__q { font-family: var(--ft-head); font-size: 24px; line-height: 1.3; }
.ft-faq__a { color: var(--ft-muted); margin-top: 14px; max-width: 640px; }

/* Contact */
.ft-contact__inner { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: clamp(48px, 8.3vw, 120px); align-items: start; }
.ft-contact__details .ft-body { margin-top: 24px; }
.ft-contact__rows { margin: 44px 0 28px; border-bottom: 1px solid var(--ft-line); }
.ft-contact__rows > div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-top: 1px solid var(--ft-line); }
.ft-contact__rows dt { flex: none; }
.ft-contact__rows dd { margin: 0; text-align: right; font-size: 15px; }
.ft-contact__rows a { text-decoration: none; }
.ft-form-card { padding: 0; }
.ft-form { gap: 30px; }
.ft-form__row { gap: 32px; }
.ft-field label { font-weight: 500; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ft-accent); }
.ft-field input, .ft-field textarea, .ft-field select { border: 0; border-bottom: 1px solid var(--ft-text); border-radius: 0; padding: 8px 0 12px; min-height: 46px; background-color: transparent; font-family: var(--ft-accent-font); font-style: italic; font-size: 19px; }
.ft-field select { padding-right: 32px; background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%; }
.ft-field textarea { min-height: 130px; }
.ft-field input::placeholder, .ft-field textarea::placeholder { color: #a9a6a2; opacity: 1; }
.ft-field input:focus, .ft-field textarea:focus, .ft-field select:focus { outline: none; border-bottom-width: 2px; }

/* Plain pages */
.ft-plain-head { padding: 90px 0 40px; }
.ft-plain-head__title { font-family: var(--ft-head); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1.05; }
.ft-plain-head__meta { font-weight: 500; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ft-accent); margin-bottom: 18px; }
.ft-plain-head__intro { margin: 18px auto 30px; color: var(--ft-muted); }
.ft-plain-body { padding-bottom: 120px; }
.ft-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px; }
.ft-post-card__image { display: block; aspect-ratio: 427 / 360; margin-bottom: 18px; }
.ft-post-card__meta { font-weight: 500; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ft-accent); }
.ft-post-card__title { font-family: var(--ft-head); font-weight: 400; font-size: 26px; line-height: 1.25; margin-top: 10px; }
.ft-post-card__title a { text-decoration: none; }

/* Footer */
.ft-footer { padding: 70px 0 30px; font-size: 14px; }
.ft-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.ft-footer__name .ft-logo__text { font-size: 30px; }
.ft-footer__text { color: var(--ft-muted); margin-top: 12px; max-width: 300px; }
.ft-footer__label { font-weight: 500; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ft-accent); margin-bottom: 14px; }
.ft-footer__list { display: grid; gap: 4px; }
.ft-footer a { text-decoration: none; }
.ft-footer a:hover { text-decoration: underline; }
.ft-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ft-line); font-size: 12px; color: var(--ft-accent); }

/* Mobile */
@media (max-width: 960px) {
	.ft-work__grid { gap: 20px; }
	.ft-work__col:nth-child(2) { padding-top: 80px; }
	.ft-work__title { font-size: 21px; }
	.ft-band { grid-template-columns: 1fr; height: auto; }
	.ft-band .ft-fill { aspect-ratio: 4 / 3; }
	.ft-band .ft-fill + .ft-fill { display: none; }
	.ft-cols { grid-template-columns: 1fr; gap: 56px; max-width: 520px; margin-inline: auto; }
	.ft-meet, .ft-cta__inner, .ft-faq__inner, .ft-contact__inner, .ft-row, .ft-row--reverse { grid-template-columns: 1fr; }
	.ft-meet__photo { min-height: 0; aspect-ratio: 4 / 5; }
	.ft-meet__text { padding: 64px var(--ft-gutter); }
	.ft-row--reverse .ft-row__image { order: 0; }
	.ft-row__image { aspect-ratio: 4 / 5; }
	.ft-footer__top { grid-template-columns: 1fr 1fr; }
	.ft-footer__brand { grid-column: 1 / -1; }
	.ft-page-hero { min-height: 420px; }
	.ft-rule-head { flex-wrap: wrap; }
}
@media (max-width: 560px) {
	.ft-logos__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
	.ft-logos__list { justify-content: flex-start; gap: 12px 32px; }
	.ft-quote__by { flex-direction: column; align-items: center; }
	.ft-quote__detail::before { display: none; }
	.ft-work__grid { grid-template-columns: 1fr; }
	.ft-work__col:nth-child(2) { padding-top: 0; }
	.ft-contact__rows > div { flex-direction: column; gap: 4px; }
	.ft-contact__rows dd { text-align: left; }
}
