/* The Gardener. The cover's flower-filled word on white; the scroll plants a seed and the word grows into a garden. */
.gd{
  --gd-white:#FBFAF7;
  --gd-ink:#17261A;
  --gd-rose:#B4122F;
  --gd-rose-d:#860B22;
  --gd-pink:#FFC9D6;
  --gd-green:#1E5A29;
  --gd-green-d:#11391A;
  --gd-lime:#CDEE82;
  background:var(--gd-white);
  color:var(--gd-ink);
  color-scheme:light;
}
@view-transition{navigation:auto}
.gd main{overflow-x:clip}
.gd em{font-style:italic}
.gd .defs{position:absolute;width:0;height:0;overflow:hidden}
.gd :focus-visible{outline-color:var(--gd-rose)}

/* header on a white page: ink type, a paper glass once scrolled */
.gd .top::before{background:linear-gradient(180deg,rgba(251,250,247,.92),rgba(251,250,247,.6) 55%,rgba(251,250,247,0))}
.gd .top.is-solid{background:rgba(251,250,247,.9);box-shadow:0 1px 0 rgba(23,38,26,.1)}
@supports (backdrop-filter:blur(8px)){.gd .top.is-solid{background:rgba(251,250,247,.8);backdrop-filter:blur(10px)}}
.gd .top .brand{color:var(--gd-ink)}
.gd .top .brand svg g{fill:var(--gd-ink)}
.gd .top .nav a{color:var(--gd-ink)}
.gd .top .nav a:hover{color:var(--gd-rose)}
.gd .top .nav__cta{border-color:rgba(23,38,26,.55)}

.s{position:relative;padding-inline:var(--gutter)}

/* poster type */
.gd-kicker{color:var(--gd-rose)}
.seed__line,.fast__accent,.grow__line,.close__line{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;line-height:1.12}
.fast__wall,.grow__wall,.close__wall{font-family:var(--poster);font-weight:800;text-transform:uppercase;line-height:.84;letter-spacing:-.004em}
.fast__wall span,.grow__wall span,.close__wall span{display:block}

/* 1. seed: the cover, turned to the reader */
.s--seed{z-index:3;min-height:100svh;padding-top:clamp(92px,12vh,128px);padding-bottom:clamp(36px,7vh,80px);background:var(--gd-white);display:flex;flex-direction:column}
.seed__word{margin:clamp(14px,2.4vh,30px) 0 0 -1.2vw;width:min(77vw,1482px);font-size:0;line-height:0}
.seed__word img{width:100%;height:auto}
.seed__line{position:relative;z-index:5;margin-top:auto;padding-top:clamp(20px,3vh,36px);max-width:15.5em;font-size:clamp(30px,3.4vw,60px)}
.seed__line em{color:var(--gd-rose)}
.seed__book{position:absolute;right:max(var(--gutter),3.4vw);bottom:clamp(30px,6vh,72px);width:clamp(190px,20.5vw,350px);view-transition-name:book-the-gardener}
.seed__book img{width:100%;filter:drop-shadow(-26px 34px 30px rgba(40,30,20,.2)) drop-shadow(-4px 6px 6px rgba(40,30,20,.16))}
.seed__book::after{content:"";position:absolute;left:-8%;right:6%;bottom:-2.4%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(23,38,26,.28),rgba(23,38,26,0));z-index:-1}

/* leaves that cross the seams */
.sprig{position:absolute;pointer-events:none;overflow:visible;z-index:4}
.sprig--a{left:-4vw;bottom:clamp(-300px,-17.5vw,-80px);width:clamp(220px,25vw,460px);transform:rotate(-6deg)}
.sprig--b{right:-4vw;bottom:clamp(-170px,-12vw,-70px);width:clamp(220px,32vw,560px);transform:scaleX(-1) rotate(-14deg)}
.sprig--c{right:-3vw;top:clamp(-120px,-8vw,-50px);width:clamp(200px,26vw,460px);transform:scaleX(-1) rotate(10deg)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sprig use{transform-box:fill-box;transform-origin:0 100%;animation:gd-unfurl linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
  }
}
@keyframes gd-unfurl{from{transform:rotate(-16deg) scale(.7);opacity:.2}to{transform:none;opacity:1}}

/* 2. the fast-everything world */
.s--fast{z-index:2;min-height:112svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(150px,24vh,240px);padding-bottom:clamp(170px,26vh,260px);color:#fff;
  background:
    radial-gradient(60% 46% at 82% 34%,rgba(255,96,120,.38),rgba(255,96,120,0) 70%),
    radial-gradient(50% 40% at 12% 70%,rgba(90,0,20,.42),rgba(90,0,20,0) 70%),
    linear-gradient(180deg,var(--gd-white) 0,#EFC2CB 6%,#C9374F 14%,var(--gd-rose) 22%,var(--gd-rose-d) 64%,#C64A5F 80%,#F1D3D9 92%,var(--gd-white) 100%)}
.fast__wall{font-size:clamp(46px,6.2vw,120px);color:var(--gd-pink)}
.fast__big{position:relative;color:#fff;font-size:clamp(58px,13.4vw,270px);line-height:.86;margin:.06em 0 .02em -.04em;white-space:nowrap}
.fast__big::before,.fast__big::after{content:attr(data-ghost);position:absolute;inset:0;color:#fff;pointer-events:none}
.fast__big::before{transform:translateX(-4.5%);opacity:.18}
.fast__big::after{transform:translateX(-9%);opacity:.07}
.fast__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 6vw;margin-top:clamp(28px,5vh,56px)}
.fast__accent{font-size:clamp(26px,2.7vw,46px);max-width:15em}
.fast__accent em{color:var(--gd-pink)}
.fast__copy{max-width:22ch;font-size:clamp(18px,1.4vw,23px);color:#FFE5EB;line-height:1.45}

/* 3. the process: plant, water, grow */
.grow{position:relative;z-index:1;height:300svh;background:var(--gd-white)}
.grow__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(46% 20% at 50% 100%,rgba(120,84,50,.26),rgba(120,84,50,.08) 60%,rgba(120,84,50,0)),var(--gd-white)}
.grow__green{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 44%,#3B8A39,#24632D 55%,var(--gd-green) 80%);opacity:0;will-change:opacity}
.grow__t1{position:absolute;left:var(--gutter);right:var(--gutter);top:clamp(96px,15vh,150px);z-index:2;will-change:transform,opacity}
.grow__wall{font-size:clamp(54px,12.8vw,250px);color:var(--gd-ink)}
.grow__line{margin-top:clamp(14px,2.4vh,28px);font-size:clamp(26px,2.8vw,48px);max-width:17em}
.grow__line em{color:var(--gd-rose)}
.grow__scene{position:absolute;inset:0}
.grow__seed{position:absolute;left:50%;top:85%;width:clamp(54px,5vw,84px);transform:translate(-50%,-50%)}
.grow__sprout{position:absolute;left:50%;bottom:16%;height:54%;width:auto;aspect-ratio:120/320;transform-origin:50% 100%;transform:scaleY(0);will-change:transform;overflow:visible;translate:-50% 0}
.grow__cot{transform-box:fill-box;transform:scale(0);will-change:transform}
.grow__cot--l{transform-origin:100% 100%}
.grow__cot--r{transform-origin:0 100%}
.grow__word{position:absolute;left:50%;top:46%;width:min(118vw,2150px);translate:-50% -50%;transform:scale(.03);opacity:0;will-change:transform,opacity}
.grow__word img{width:100%;height:auto}
.grow__scrim{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,rgba(17,57,26,0),rgba(17,57,26,.72) 46%,rgba(17,57,26,.94));opacity:0;will-change:opacity}
.grow__t2{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(30px,6vh,70px);z-index:3;color:#fff;opacity:0;will-change:transform,opacity}
.grow__line--t2{font-size:clamp(24px,2.5vw,42px);margin:0 0 clamp(8px,1.6vh,18px)}
.grow__line--t2 em{color:var(--gd-lime)}
.grow__wall--t2{color:#fff;font-size:clamp(52px,10.4vw,210px)}
.grow__wall--t2 .sm{font-size:.38em;line-height:1;margin-bottom:.12em;color:var(--gd-lime)}

/* still version: reduced motion, or no script */
@media (prefers-reduced-motion:reduce){
  .gd .grow{height:auto}
  .gd .grow__pin{position:relative;height:auto;overflow:hidden}
  .gd .grow__t1{position:relative;left:auto;right:auto;top:auto;padding:clamp(96px,16vh,170px) var(--gutter) clamp(40px,8vh,90px)}
  .gd .grow__green,.gd .grow__seed,.gd .grow__sprout{display:none}
  .gd .grow__scene{position:relative;overflow:hidden;height:max(100svh,560px);background:linear-gradient(180deg,var(--gd-white),#7FB06A 14%,#2F7A33 30%,var(--gd-green) 70%)}
  .gd .grow__word{transform:none;opacity:1}
  .gd .grow__scrim{opacity:1}
  .gd .grow__t2{opacity:1}
}
html:not(.js) .grow{height:auto}
html:not(.js) .grow__pin{position:relative;height:auto}
html:not(.js) .grow__t1{position:relative;left:auto;right:auto;top:auto;padding:clamp(96px,16vh,170px) var(--gutter) clamp(40px,8vh,90px)}
html:not(.js) .grow__green,html:not(.js) .grow__seed,html:not(.js) .grow__sprout{display:none}
html:not(.js) .grow__scene{position:relative;overflow:hidden;height:max(100svh,560px);background:linear-gradient(180deg,var(--gd-white),#2F7A33 30%,var(--gd-green) 70%)}
html:not(.js) .grow__word,html:not(.js) .grow__scrim,html:not(.js) .grow__t2{transform:none;opacity:1}

/* 4. the harvest */
.s--close{z-index:2;min-height:100svh;color:#fff;padding-top:clamp(90px,14vh,150px);padding-bottom:clamp(60px,10vh,110px);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-rows:auto 1fr;column-gap:4vw;align-items:start;
  background:
    radial-gradient(30% 40% at 22% 60%,rgba(226,255,196,.2),rgba(226,255,196,0) 72%),
    radial-gradient(46% 40% at 70% 30%,rgba(205,238,130,.1),rgba(205,238,130,0) 70%),
    linear-gradient(180deg,#123B1B 0,#1A4F25 34%,#15441F 62%,var(--gd-green-d) 82%,var(--midnight) 100%)}
.close__wall{grid-column:1 / -1;font-size:clamp(56px,10.6vw,214px);color:#fff;position:relative;z-index:1}
.close__wall span{display:inline}
.close__wall span + span{color:var(--gd-lime)}
.close__book{grid-column:1;grid-row:2;justify-self:center;width:min(28vw,400px,calc(64svh * 523 / 900));margin-top:clamp(16px,3vh,34px);position:relative;z-index:2}
.close__book img{width:100%;filter:drop-shadow(-30px 40px 36px rgba(0,0,0,.42)) drop-shadow(-6px 8px 8px rgba(0,0,0,.3))}
.close__book::after{content:"";position:absolute;left:-10%;right:4%;bottom:-3%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),rgba(0,0,0,0));z-index:-1}
.close__text{grid-column:2;grid-row:2;position:relative;z-index:5;padding-top:clamp(20px,5vh,60px);max-width:34em}
.close__line{font-size:clamp(26px,2.5vw,42px);color:#F2F7EC}
.close__line em{color:var(--gd-lime)}
.close__by{margin-top:clamp(18px,3vh,30px);font:700 13px/1.3 var(--label);letter-spacing:.2em;text-transform:uppercase;color:#D7E8CF}
.close__buy{display:flex;align-items:center;gap:22px;margin-top:clamp(22px,3.6vh,36px)}
.close__price{font:800 clamp(40px,3.4vw,58px)/1 var(--poster);color:#fff}
.gd-btn{background:var(--gd-lime);color:var(--gd-green-d);padding:0 30px}
.gd-btn:hover{background:#fff}
.close__note{margin-top:12px;font-size:15px;color:#D7E8CF}
.close__links{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:clamp(22px,4vh,44px)}
.close__links .textlink{color:#fff}
.close__links .textlink:hover{color:var(--gd-lime)}
.gd .s--close :focus-visible,.gd .s--fast :focus-visible{outline-color:#fff}

/* phone and portrait tablet: the cover's own upright word */
@media (max-width:699px), (orientation:portrait) and (max-width:1100px){
  .s--seed{padding-top:82px;padding-bottom:30px}
  .seed__word{position:relative;margin:10px -2vw 0 auto;width:auto;height:min(70svh,620px);aspect-ratio:636/1482}
  .seed__word img{height:100%;width:auto}
}
@media (min-width:700px) and (orientation:portrait) and (max-width:1100px){
  .seed__word{height:min(72svh,980px);margin-right:4vw}
  .seed__book{left:var(--gutter);right:auto;top:36%;bottom:auto;width:30vw}
  .seed__line{max-width:12em}
}

/* phone: its own crops */
@media (max-width:699px){
  .seed__line{font-size:clamp(28px,8.4vw,36px);max-width:none}
  .seed__book{display:none}
  .sprig--a{width:46vw;left:-14vw;bottom:-30vw}
  .sprig--b{width:64vw;right:-14vw;bottom:-30vw}
  .sprig--c{width:44vw;top:-14vw;right:-12vw}
  .s--fast{min-height:0;padding-top:190px;padding-bottom:190px}
  .fast__big{font-size:clamp(40px,14.2vw,80px)}
  .fast__wall{font-size:clamp(34px,10.4vw,56px)}
  .fast__foot{display:block}
  .fast__copy{margin-top:16px}
  .grow{height:280svh}
  .grow__t1{top:96px}
  .grow__wall{font-size:clamp(46px,15vw,84px)}
  .grow__word{width:auto;height:min(120svh,1600px);aspect-ratio:636/1482;top:44%}
  .grow__word img{height:100%;width:auto}
  .grow__wall--t2{font-size:clamp(40px,13vw,72px)}
  .s--close{display:block;padding-top:110px}
  .close__wall{font-size:clamp(50px,16vw,92px)}
  .close__wall span{display:block}
  .close__book{width:min(60vw,300px);margin:clamp(26px,5vh,40px) auto 0}
  .close__text{padding-top:34px}
  .close__buy{flex-wrap:wrap}
}
@media (max-width:360px){
  .close__buy{gap:14px}
}