/* One full-screen view: the field photo, the Exposure wordmark, and a newsletter signup. Everything is set in Exposure. */
@font-face{font-family:"Exposure";src:url("ExposureVAR.woff2") format("woff2");font-style:normal;font-display:block}
@font-face{font-family:"Exposure";src:url("ExposureVAR-Italic.woff2") format("woff2");font-style:italic;font-display:swap}
:root{--small:clamp(16px,1.25vw,20px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#2f4a2a}
body{color:#fff;font-family:"Exposure",Georgia,serif;font-variation-settings:"EXPO" 0;font-size:var(--small);line-height:1.3}
a{color:inherit}
h1,p{margin:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.stage{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;container-type:inline-size}
.stage-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.stage:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 55%,rgba(15,35,15,.08),rgba(15,35,15,.32))}

/* Top row: contact on the left, glowing butterfly in the middle, instagram on the right. */
.head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;padding:clamp(20px,2.5vw,36px) clamp(16px,2.5vw,36px) 0}
.head .corner:last-child{justify-self:end}
.logo{display:block;width:clamp(56px,4.5vw,80px);height:auto;mix-blend-mode:screen;filter:drop-shadow(0 0 4px rgba(244,255,200,.9)) drop-shadow(0 0 16px rgba(220,255,150,.55));animation:glow 5s ease-in-out infinite}
@keyframes glow{50%{opacity:.82;transform:scale(.97)}}

.intro{display:flex;flex-direction:column;align-items:center;width:100%;padding:24px 16px;text-align:center}

/* Exposure wordmark from the double diamond talk: three blurred, blended layers over the photo.
   Sized from the measured ink at EXPO -60 (5.9975em wide, starting .0225em left of the box, baseline .8975em down)
   so the brightest layers touch the left, right, and bottom edges of the window. */
.wordmark{justify-self:start;display:grid;justify-items:start;margin:0 0 -.1025em -.0235em;font-family:"Exposure",Georgia,serif;font-weight:400;font-size:calc(100cqw / 5.9975);line-height:1;white-space:nowrap;user-select:none}
.wordmark span{grid-area:1/1;position:relative}
.wordmark span:nth-child(1){left:-.046em;font-variation-settings:"EXPO" -80;mix-blend-mode:overlay;filter:blur(.079em)}
.wordmark span:nth-child(2){left:.046em;font-variation-settings:"EXPO" -60;opacity:.85;mix-blend-mode:overlay;filter:blur(.023em)}
.wordmark span:nth-child(3){left:.046em;font-variation-settings:"EXPO" -60;opacity:.85;mix-blend-mode:plus-lighter;filter:blur(.023em)}

.tagline,.signup-status,.corner{text-shadow:0 1px 12px rgba(0,40,10,.4)}
.tagline{margin-top:clamp(4px,.6vw,10px);font-style:italic}

/* Editorial signup: a hairline rule to write on, with the button set as words. */
.signup{display:flex;align-items:baseline;gap:20px;width:min(100%,400px);margin-top:clamp(28px,3.2vw,52px);border-bottom:1px solid rgba(255,255,255,.6);transition:border-color .3s}
.signup:focus-within{border-color:#fff}
.signup input{flex:1;min-width:0;padding:8px 0;border:0;background:transparent;color:#fff;font:inherit;font-size:max(16px,var(--small));outline:none}
.signup input::placeholder{color:rgba(255,255,255,.7)}
.signup button{flex:none;padding:8px 0;border:0;background:none;color:#fff;font:inherit;cursor:pointer;text-shadow:0 1px 12px rgba(0,40,10,.4)}
.signup button:after{content:"→";display:inline-block;margin-left:.4em;transition:transform .3s}
.signup button:hover:after{transform:translateX(4px)}
.signup button:disabled{cursor:progress;opacity:.7}
.signup-status{margin-top:14px}
.signup-status:empty{display:none}
.intro.is-done .signup{display:none}
.intro.is-done .signup-status{margin-top:clamp(28px,3.2vw,52px)}
.corner{justify-self:start;opacity:.85;text-decoration:none}
.corner:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid #fff;outline-offset:4px}
.signup input:focus-visible{outline:none}

@media(max-width:600px){
 /* Keep her face in frame on tall screens. */
 .stage-photo{object-position:72% center}
}
@media(prefers-reduced-motion:reduce){.logo{animation:none}.signup button:after{transition:none}}