/* ---------- Webfonts: Cormorant Garamond (supplied by Conway, variable 300-700) ---------- */
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}


:root{
	--beige:#D0C6C3; --black:#030303; --ink:#000004; --light:#D0C6C3;
	--serif:"Cormorant Garamond",Georgia,serif; --sans:var(--serif);
	--gutter:8.6rem;
}
html{font-size:calc(100vw / 144);scroll-behavior:smooth}
@media (max-width:1199px){html{font-size:calc(100vw / 120)}}   /* tablet landscape */
@media (max-width:1023px){html{font-size:calc(100vw / 80)}}    /* tablet portrait  */
@media (max-width:767px){html{font-size:calc(100vw / 39)}:root{--gutter:2.4rem}} /* mobile, 390px design */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--beige);color:var(--ink);font-family:var(--serif);font-size:1.8rem;line-height:1.5;
	-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{display:block;max-width:100%}
a{color:inherit;transition:opacity .3s ease,color .3s ease}
:focus-visible{outline:.2rem solid currentColor;outline-offset:.3rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media (min-width: 1441px) {.intro .label {
    padding-top: 50px;
	}}
/* ---------- Stacking: hero stays fixed, every following section slides over it ---------- */
main{position:relative}
.prose a,
.prose a:hover,
.prose a:focus,
.prose a:active {
    color: inherit !important;
	pointer-events: none !important;
    cursor: default !important;
    opacity: 1 !important;
    background: none !important;
    transition: none !important;
    box-shadow: none !important;
    filter: none !important;
}
.hero{position:sticky;top:0;z-index:0;height:100vh;height:100svh;display:grid;place-items:center;background:var(--beige)}
.intro,.relaxed,.media,.philosophy,.closing{position:relative;z-index:2}
/* iOS Safari: paint covering sections on their own layer so the pinned hero never shows through */
.intro,.relaxed,.media,.philosophy,.closing,.hero{
	-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;backface-visibility:hidden;
}

/* Section-2 heading: sits at the top of section 2, then stays pinned to the top of the viewport.
   mix-blend-mode keeps it legible over black, beige and photos. */
.stick{position:sticky;top:0;z-index:20;height:0;pointer-events:none;mix-blend-mode:difference;color:#fff}
.stick__title{margin:0;padding-top:3.2rem;display:flex;justify-content:center;line-height:1}
.stick__svg{display:block;width:8.4rem;height:auto;overflow:visible}
.stick__svg .wordmark__l{stroke-width:7;opacity:1;transform:none;animation:none}

/* ---------- Header / footer ---------- */
.site-header{position:absolute;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:2.4rem var(--gutter)}
.site-header ul,.site-footer ul{list-style:none;display:flex;gap:2.4rem;margin:0;padding:0}
.site-header a{text-decoration:none}
.site-header a:hover,.site-header a:focus-visible{opacity:.55}
.site-header__logo img{height:3.6rem;width:auto}
.site-footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1.6rem;background:var(--black);color:var(--light);padding:1.8rem 3.2rem;font-size:1.5rem}
.site-footer a{text-decoration:none}
.site-footer a:hover,.site-footer a:focus-visible{opacity:.6;text-decoration:underline}


/* ---------- Hero ---------- */
.wordmark__svg,.wordmark__img{display:block;width:22.6rem;height:auto;overflow:visible}
.wordmark__l{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linejoin:miter;stroke-linecap:butt;
	opacity:0;transform:translateY(1.2rem);animation:letterin .9s cubic-bezier(.22,.7,.2,1) forwards}
.wordmark__l:nth-child(1){animation-delay:.15s}.wordmark__l:nth-child(2){animation-delay:.3s}
.wordmark__l:nth-child(3){animation-delay:.45s}.wordmark__l:nth-child(4){animation-delay:.6s}
@keyframes letterin{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wordmark__l{opacity:1;transform:none;animation:none}}
.screen-reader-text{position:absolute;width:.1rem;height:.1rem;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wordmark{margin:0;font-family:var(--sans);font-weight:300;font-size:8rem;letter-spacing:.32em;text-indent:.32em;color:var(--black);line-height:1}
.hero__scroll{position:absolute;right:var(--gutter);bottom:3.2rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;font-size:18px;text-decoration:none; font-weight: 500; letter-spacing: -0.18px;}
.hero__scroll:hover,.hero__scroll:focus-visible{opacity:.5}
.hero__line{width:.1rem;height:4rem;background:currentColor;transform-origin:top;animation:scrollcue 2.4s ease-in-out infinite}
@keyframes scrollcue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero__line{animation:none}}

/* ---------- Sections ---------- */
/* Section 2: the paragraph stays pinned while the section scrolls, then leaves with it.
   (grid makes the sticky item's range the whole section height) */
.intro{display:grid;align-content:start;min-height:200vh}
.intro .prose{position:sticky;top:100px;align-self:start}
.intro.is-free{min-height:0}
.intro.is-free .prose{position:static}
.intro{background:var(--black);color:var(--light);padding-left:155px;padding-top:100px; padding-bottom:388px; padding-right:385px;}
.prose{max-width:92rem}
.prose p{margin:0 0 3rem;text-indent:116px; font-size: 28px; font-weight: 500; letter-spacing: -1.12px;line-height: 30.8px;}
.prose p:last-child{margin-bottom:0}
.prose u,.prose a{text-decoration:underline;text-underline-offset:.25em; text-decoration-thickness: 1px;}
.prose a:hover{opacity:.6}

.relaxed{background:var(--beige);padding-left:155px;padding-top:100px; padding-bottom:211px; padding-right:385px;}
.label{margin:0 0 .4rem;font-weight:500;font-style:italic;font-size:28px; line-height: 120%;}
.philosophy .label{font-weight:500;font-style:italic;font-size:20px; line-height: 120%;}

.media{display:grid;min-height:80vw;overflow:clip;color:#fff;background:#222}
.media--tall{min-height:90vw}
.media picture,.media__el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.05) 40%,rgba(0,0,0,.2))}
.quote__body{position:sticky;top:0;z-index:2;margin:0;padding:9rem var(--gutter) 0;text-align:center;align-self:start}
.quote__body p{margin:0;font-size:33px; font-weight:400; color: #FDFAF1;line-height: 120%; letter-spacing: -1.32px;}
.quote__body cite{display:block;margin-top:.4rem; margin-bottom:50px;font-size:28px; font-weight:400;}

.philosophy{background:var(--beige);padding-top:269px; padding-bottom:270px;padding-left:40px; padding-right:500px;}
.philosophy__list{list-style:none;margin:2rem 0 0;padding:0;columns:2;column-gap:6rem;max-width:92rem;font-size:1.5rem}
.philosophy__list li{break-inside:avoid;margin:0 0 2.4rem}
.philosophy__list h3{margin:0;font-size:20px;font-weight:500; letter-spacing: -0.2px; line-height: 110%;}
.philosophy__list p{margin:.2rem 0 0;text-indent:116px; font-size:20px;font-weight:500; letter-spacing: -0.2px; line-height: 110%;}

.closing{--footer-h:5.8rem;display:flex;flex-direction:column;min-height:calc(100vh - var(--footer-h));min-height:calc(100svh - var(--footer-h));background:var(--black);color:var(--light);text-align:center;padding:3.4rem var(--gutter) 4rem}
.closing__title{margin:0;font-weight:400;font-style:italic;font-size:42px;line-height:1.2; letter-spacing: -1.68px;}
.closing__brand{display:flex;flex-direction:column;align-items:center;gap:3.2rem;margin-block:auto;padding-block:4rem}
.closing__symbol{display:block;width:14rem;height:auto;margin-inline:auto;color:var(--beige)}
.closing__word{display:block;color:var(--beige);font-family:var(--sans);font-weight:300;font-size:3rem;letter-spacing:.3em;text-indent:.3em}
.closing__svg{display:block;width:13.4rem;height:auto;overflow:visible}
.closing__svg .wordmark__l{stroke-width:11;opacity:1;transform:none;animation:none}
/* last screen: the pinned section-2 heading steps aside on desktop (it stays on mobile) */
.stick{transition:opacity .4s ease}
body.is-finale .stick{opacity:0}
.closing__form{max-width:48rem;margin:4rem auto 0;text-align:left}

/* ---------- Forms (Contact Form 7) ---------- */
.grecaptcha-badge{visibility:hidden!important}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 textarea{width:100%;background:transparent;border:0;border-bottom:.1rem solid currentColor;color:inherit;font:inherit;padding:1rem 0;border-radius:0}
.wpcf7 input[type=submit]{background:transparent;color:inherit;border:.1rem solid currentColor;padding:1.2rem 3.2rem;font:inherit;letter-spacing:.15em;cursor:pointer;transition:background .3s,color .3s}
.wpcf7 input[type=submit]:hover,.wpcf7 input[type=submit]:focus-visible{background:var(--light);color:var(--black)}
.wpcf7-not-valid-tip,.wpcf7-response-output{font-size:1.4rem}
.oasi-hp{position:absolute!important;left:-9999px;height:0;overflow:hidden}
.recaptcha-note{font-size:1.1rem;opacity:.6}

/* ---------- Tablet portrait: desktop base for the grid, mobile feel for the rest ---------- */
@media (max-width:1023px){
	.wordmark{font-size:7rem}
	.philosophy__list{columns:2}
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
	body{font-size:1.6rem}
	.wordmark{font-size:4.8rem}
	.wordmark__svg,.wordmark__img{width:23.7rem}
	.hero__scroll{bottom:2.4rem;font-size:1.2rem}
	.stick__title{padding-top:2.6rem}
	.stick__svg{width:8.6rem}
	.intro{padding:100px var(--gutter) 10rem;min-height:180vh}
	.intro .prose{top:8rem}
	.prose p{text-indent:106px;margin-bottom:2.4rem; font-size:26px; font-weight:500; line-height: 120%; letter-spacing: -0.72px;}
	.relaxed{padding:8rem var(--gutter)}
	.label{font-weight:500;font-style:italic;font-size:26px; line-height: 120%;}
	.philosophy .label{font-weight:500;font-style:italic;font-size:18px; line-height: 120%;}
	.media,.media--tall{min-height:1145px}
	.quote__body{padding-top:7rem}
	.philosophy__list h3{margin:0;font-size:18px;font-weight:500; letter-spacing: -0.2px; line-height: 120%;}
	.quote__body p{font-size:2.6rem}
	.quote__body cite{font-size:1.8rem}
	.philosophy{padding:8rem var(--gutter)}
	.philosophy__list{columns:1;font-size:1.4rem}
	.closing{--footer-h:11rem;padding-top:8.4rem;padding-bottom:3rem}
	.closing__title{font-size:2.6rem}
	.closing__brand{gap:3.6rem}
	.closing__symbol{width:14.8rem; padding-top: 15px; padding-bottom: 10px;}
	.closing__svg{width:14rem}
	.site-footer{gap:1.4rem;padding:2rem var(--gutter) 2.4rem;font-size:1.4rem}
	.site-footer{flex-direction:column-reverse;text-align:center}
}