@import url('/fonts/fonts.css');
:root{color-scheme:light;--ink:#21392c;--edge:clamp(24px,4vw,72px);--field-height:52vh;font-family:'Space Grotesk',sans-serif;background:#b8cfbd;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;height:100svh;overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}#sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
header{position:absolute;top:27px;left:var(--edge);right:var(--edge);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font:400 35px/1 'Instrument Serif',Georgia,serif;letter-spacing:-1px;white-space:nowrap}nav{display:flex;gap:34px}.project{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:14px;font-weight:500;text-underline-offset:6px}.project:hover{text-decoration:underline}.arrow{font-size:13px;opacity:.55}
main{position:absolute;inset:0}h1{position:absolute;left:50%;bottom:calc(var(--field-height) * .84 - .13em);transform:translateX(-50%);z-index:1;font:400 clamp(120px,15vw,240px)/.85 'Instrument Serif',Georgia,serif;letter-spacing:-.035em;white-space:nowrap;margin:0;text-align:center;pointer-events:none}.title-grass{font-style:italic}.company{display:inline-block;vertical-align:top;font:400 .18em/1 'Instrument Serif',Georgia,serif;letter-spacing:-.03em;margin:.18em 0 0 .28em}
.about{position:absolute;top:auto;bottom:calc(var(--field-height) * .84 + clamp(120px,15vw,240px) * .72 + 36px);left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 2 * var(--edge)));z-index:4;text-align:center;font-size:13px;line-height:1.6;isolation:isolate}.about::before{content:'';position:absolute;inset:-28px -10px -22px;z-index:-1;background:radial-gradient(ellipse closest-side at 50% 40%,#f1f2e380,transparent 100%);pointer-events:none}.about p{margin:0 0 14px}.about .lead{font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.9px}.about .grass-invitation{display:flex;flex-direction:column;align-items:center;gap:8px;margin:20px 0 0;font-size:11px;line-height:1.4}.grass-invitation svg{width:12px;height:20px;fill:none;stroke:currentColor;stroke-width:1.1}
.grass-patch{position:absolute;left:0;right:0;bottom:0;height:var(--field-height);overflow:hidden;z-index:2}#grass{display:block;width:100%;height:100%;touch-action:none}.motion-control{position:absolute;z-index:5;bottom:23px;right:var(--edge);font-size:11px;line-height:1.5;color:#f0f1e3d9;padding:6px 0;border-bottom:1px solid #f0f1e34d}.motion-control:hover{color:white}
@media(max-width:1100px){nav{gap:26px}.project{font-size:13px}h1{font-size:16.2vw}.about{top:110px;bottom:auto;font-size:13px}.about .lead{font-size:22px}}
@media(min-width:701px) and (max-width:850px){h1{font-size:16.5vw}.about{top:auto;bottom:calc(var(--field-height) * .84 + 16.5vw * .72 + 36px)}}
@media(max-width:700px){:root{--edge:24px;--field-height:38vh}header{top:23px;gap:20px}.wordmark{font-size:29px}nav{gap:22px}.project{font-size:13px;gap:0}.project .arrow{display:none}.about{top:112px;width:calc(100% - 2 * var(--edge));max-width:430px;font-size:14px;line-height:1.65}.about .lead{font-size:25px;line-height:1.2;letter-spacing:-.7px}.about p{margin-bottom:19px}.about .grass-invitation{font-size:11px;margin-top:24px;gap:11px}.desktop-break{display:none}h1{font-size:110px;line-height:.78;bottom:calc(var(--field-height) * .84 - .11em)}.title-touch,.title-grass{display:block}.title-grass{margin-top:.11em}.company{font-size:.18em;margin-top:.2em}.motion-control{bottom:18px;font-size:10px}}
@media(max-width:420px){:root{--edge:22px}nav{gap:19px}.project{font-size:12px}.wordmark{font-size:28px}.about{top:105px;font-size:13px}.about .lead{font-size:24px}h1{font-size:102px}}
@media(max-height:740px) and (max-width:700px){:root{--field-height:36vh}.about{top:92px;font-size:12px;line-height:1.55}.about .lead{font-size:21px}.about p{margin-bottom:15px}.about .grass-invitation{font-size:10px;margin-top:19px;gap:8px}.grass-invitation svg{height:22px}h1{font-size:86px}}
@media(max-height:550px) and (min-width:701px){:root{--field-height:44vh}header{top:18px}.wordmark{font-size:29px}.about{top:78px;bottom:auto;font-size:12px;line-height:1.5}.about .lead{font-size:21px}.about p{margin-bottom:10px}.about .grass-invitation{margin-top:15px;font-size:10px;gap:6px}.grass-invitation svg{height:20px}h1{font-size:90px}.motion-control{bottom:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Complete visual studies. Scene colours come from look.js. */
:root{background:var(--paper);font-family:'DM Mono',monospace}
#sky,#grass{image-rendering:pixelated}
.wordmark{display:flex;align-items:center;gap:10px;font:400 11px/1.4 'DM Mono',monospace;letter-spacing:-.3px}
.brand-glyph{display:grid;place-items:center;width:36px;height:36px;background:var(--ink);color:var(--paper);font:500 24px/1 'DM Mono',monospace;letter-spacing:-3px;padding-right:3px}
.brand-name{font-size:11px}
.project{font-size:12px;font-weight:400}
.about{font-size:13px}.about::before{display:none}.about .lead{font:400 26px/1.15 'Instrument Serif',serif;letter-spacing:-.3px}
.motion-control{color:var(--paper);font:400 10px/1.5 'DM Mono',monospace;border-bottom-color:var(--paper)}
html[data-look=halftone] h1{font:600 clamp(90px,10vw,160px)/1 'Space Grotesk',sans-serif;letter-spacing:-.07em}
html[data-look=halftone] .title-grass{font-style:normal}
html[data-look=halftone] .company{font-family:'Space Grotesk',sans-serif;font-size:.15em}
html[data-look=halftone] .about{bottom:calc(var(--field-height) * .84 + clamp(90px,10vw,160px) * .87 + 36px)}
html[data-look=halftone] .about .lead{font:500 22px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.7px}
html[data-look=halftone] .brand-glyph{color:var(--ink);background:none;border:1px solid var(--ink)}
html[data-look=pocket] h1{font:400 clamp(60px,7vw,112px)/1.25 'Silkscreen',monospace;letter-spacing:-.055em}
html[data-look=pocket] .title-grass{font-style:normal}
html[data-look=pocket] .company{font-family:'DM Mono',monospace;font-size:.18em;letter-spacing:-.05em}
html[data-look=pocket] .about{bottom:calc(var(--field-height) * .84 + clamp(60px,7vw,112px) * 1.12 + 36px)}
html[data-look=pocket] .about .lead{font:400 18px/1.3 'Silkscreen',monospace;letter-spacing:-.7px}
html[data-look=pocket] .brand-glyph{font:400 23px/1 'Silkscreen',monospace;letter-spacing:-4px}
@media(max-width:1100px) and (min-width:701px){html[data-look=halftone] .about,html[data-look=pocket] .about{top:100px;bottom:auto}.about{font-size:11px}.about .lead{font-size:24px}}
@media(max-width:700px){.brand-name{display:none}.wordmark{font-size:11px}.brand-glyph{width:32px;height:32px;font-size:22px}.project{font-size:11px}.about{font-size:12px}.about .lead{font-size:27px}.about .grass-invitation{font-size:10px}html[data-look=halftone] h1{font-size:74px;line-height:.85}html[data-look=pocket] h1{font-size:46px;line-height:1.2}html[data-look=halftone] .about,html[data-look=pocket] .about{top:112px;bottom:auto}html[data-look=halftone] .about .lead{font-size:23px}html[data-look=pocket] .about .lead{font-size:18px}}
@media(max-width:420px){html[data-look=halftone] .about,html[data-look=pocket] .about{top:105px}html[data-look=halftone] h1{font-size:68px}html[data-look=pocket] h1{font-size:42px}}
@media(max-height:740px) and (max-width:700px){.about{font-size:11px}.about .lead{font-size:24px}html[data-look=halftone] .about,html[data-look=pocket] .about{top:92px}html[data-look=halftone] h1{font-size:59px}html[data-look=pocket] h1{font-size:38px}html[data-look=halftone] .about .lead{font-size:20px}html[data-look=pocket] .about .lead{font-size:16px}}
@media(max-height:550px) and (min-width:701px){html[data-look=halftone] h1{font-size:85px}html[data-look=pocket] h1{font-size:65px}html[data-look=halftone] .about,html[data-look=pocket] .about{top:78px;bottom:auto}.about{font-size:11px}.about .lead{font-size:21px}html[data-look=halftone] .about .lead{font-size:20px}html[data-look=pocket] .about .lead{font-size:16px}}

/* Field print: readable copy, a single mark, and deeper foreground overlap. */
html[data-layout=field]{--print-title:clamp(120px,15vw,240px)}
html[data-layout=field] h1{font-size:var(--print-title);line-height:.85;bottom:calc(var(--field-height) * .84 - .30em);text-shadow:0 .025em .045em #20372e1a}
html[data-layout=field] .about{top:auto;bottom:calc(var(--field-height) * .84 + var(--print-title) * .55 + 28px);width:min(760px,calc(100% - 2 * var(--edge)));max-width:none;font-size:18px;line-height:1.6}
html[data-layout=field] .about .lead{font:400 44px/1.04 'Instrument Serif',serif;letter-spacing:-.8px;max-width:680px;margin-left:auto;margin-right:auto}
html[data-layout=field] .about p{margin-bottom:24px}
html[data-layout=field] .about .grass-invitation{display:block;margin:28px 0 0;font-size:18px;line-height:1.5}
@media(max-width:1100px) and (min-width:701px){html[data-layout=field] .about{font-size:17px}html[data-layout=field] .about .lead{font-size:40px}html[data-layout=field] .about .grass-invitation{font-size:17px}}
@media(max-width:700px){html[data-layout=field]{--print-title:110px}html[data-layout=field] h1{line-height:.78}html[data-layout=field] .about{top:95px;bottom:auto;font-size:16px;line-height:1.6}html[data-layout=field] .about .lead{font-size:36px;line-height:1.04;letter-spacing:-.5px}html[data-layout=field] .about p{margin-bottom:22px}html[data-layout=field] .about .grass-invitation{font-size:15px;line-height:1.5;margin-top:24px}}
@media(max-width:420px){html[data-layout=field]{--print-title:102px}html[data-layout=field] .about{top:90px;font-size:15px}html[data-layout=field] .about .lead{font-size:34px}}
@media(max-height:740px) and (max-width:700px){html[data-layout=field]{--print-title:86px}html[data-layout=field] .about{top:82px;font-size:14px;line-height:1.55}html[data-layout=field] .about .lead{font-size:31px}html[data-layout=field] .about p{margin-bottom:18px}html[data-layout=field] .about .grass-invitation{font-size:14px;margin-top:20px}}
@media(max-height:550px) and (min-width:701px){html[data-layout=field]{--print-title:90px}html[data-layout=field] .about{top:76px;bottom:auto;width:min(720px,calc(100% - 2 * var(--edge)));font-size:13px;line-height:1.5}html[data-layout=field] .about .lead{font-size:29px;max-width:none}html[data-layout=field] .about p{margin-bottom:13px}html[data-layout=field] .about .grass-invitation{font-size:13px;margin-top:14px}}

/* Let the title grow on smaller screens while keeping most of each letter visible. */
@media(min-width:701px) and (max-width:1100px){
  html[data-layout=field]{--print-title:clamp(140px,17vw,190px)}
  html[data-layout=field] h1{bottom:calc(var(--field-height) * .84 - .12em)}
  html[data-layout=field] .about{top:auto;bottom:calc(var(--field-height) * .84 + var(--print-title) * .73 + 28px);font-size:16px}
  html[data-layout=field] .about .lead{font-size:36px}
  html[data-layout=field] .about .grass-invitation{font-size:16px}
}
@media(min-width:701px) and (max-width:1100px) and (max-aspect-ratio:1/1){
  html[data-layout=field]{--print-title:clamp(145px,20vw,200px)}
  html[data-layout=field] h1{line-height:.78}
  html[data-layout=field] .title-touch,html[data-layout=field] .title-grass{display:block}
  html[data-layout=field] .title-grass{margin-top:.11em}
  html[data-layout=field] .about{top:110px;bottom:auto;font-size:17px}
  html[data-layout=field] .about .lead{font-size:40px}
}
@media(min-width:701px) and (max-width:1100px) and (max-height:740px){
  html[data-layout=field]{--field-height:44vh;--print-title:min(17vw,150px)}
}
@media(max-width:700px){
  html[data-layout=field]{--print-title:clamp(86px,26vw,130px)}
  html[data-layout=field] h1{line-height:.78;bottom:calc(var(--field-height) * .84 - .12em)}
  html[data-layout=field] .title-touch,html[data-layout=field] .title-grass{display:block}
  html[data-layout=field] .title-grass{margin-top:.11em}
}
@media(max-width:700px) and (max-height:740px){html[data-layout=field]{--print-title:86px}}
@media(max-width:700px) and (max-height:550px){
  html[data-layout=field]{--print-title:80px}
  html[data-layout=field] h1{line-height:.85}
  html[data-layout=field] .title-touch,html[data-layout=field] .title-grass{display:inline}
  html[data-layout=field] .title-grass{margin-top:0}
  html[data-layout=field] .about{top:72px;max-width:620px;font-size:11px;line-height:1.5}
  html[data-layout=field] .about .lead{font-size:24px}
  html[data-layout=field] .about p{margin-bottom:12px}
  html[data-layout=field] .about .grass-invitation{margin-top:15px;font-size:11px}
}

@media(min-width:1101px) and (min-height:551px){html[data-layout=field] .about{bottom:calc(var(--field-height) * .84 + var(--print-title) * .55 + 56px)}}
html[data-layout=field] .copy-sentence{display:block}
@media(max-width:1100px){html[data-layout=field] .copy-sentence + .copy-sentence{margin-top:.45em}}

/* Keep the Field print wordmark together and only tuck its baseline into the grass. */
html[data-layout=field] h1{line-height:.85;bottom:calc(var(--field-height) * .84 - .08em)}
html[data-layout=field] .title-touch,html[data-layout=field] .title-grass{display:inline}
html[data-layout=field] .title-grass{margin-top:0}
@media(min-width:1101px) and (min-height:551px){html[data-layout=field] .about{bottom:calc(var(--field-height) * .84 + var(--print-title) * .77 + 36px)}}
@media(max-width:1100px){html[data-layout=field]{--print-title:clamp(56px,20vw,190px)}}
@media(min-width:701px) and (max-width:1100px){html[data-layout=field] .about{top:auto;bottom:calc(var(--field-height) * .84 + var(--print-title) * .77 + 28px)}}
@media(min-width:701px) and (max-width:1100px) and (max-aspect-ratio:1/1){html[data-layout=field] .about{top:110px;bottom:auto}}
@media(max-height:550px) and (min-width:701px){html[data-layout=field]{--print-title:90px}html[data-layout=field] .about{top:76px;bottom:auto}}
@media(max-height:550px) and (max-width:700px){html[data-layout=field]{--print-title:80px}}

/* Keep the links in the sky and tuck the title gently into the hills. */
.site-links{position:absolute;top:clamp(24px,4vh,42px);left:var(--edge);right:var(--edge);bottom:auto;z-index:5;display:block}
.site-links nav{display:flex;justify-content:center;align-items:center;gap:32px}
.site-links a{padding:10px 0;font:400 14px/1.4 'DM Mono',monospace;color:var(--ink);text-decoration:none;text-underline-offset:5px}
.site-links a:hover{text-decoration:underline}
.site-links .contact-link{margin-left:10px;padding-left:28px;border-left:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
html[data-layout=field] h1{bottom:calc(var(--field-height) * .84 - .22em)}
@media(max-width:700px){.site-links{top:24px}.site-links nav{gap:20px}.site-links a{font-size:12px}.site-links .contact-link{margin-left:0;padding-left:20px}}
@media(max-width:380px){.site-links nav{gap:16px}.site-links a{font-size:11px}.site-links .contact-link{padding-left:16px}}
@media(max-height:550px){.site-links{top:14px}}

/* Loose points in the sky; fixed positions keep them easy to find again. */
.site-links{top:0;left:0;right:0;height:36svh;pointer-events:none}
.site-links nav{display:block}
.site-links a{position:absolute;pointer-events:auto;padding:12px;font-size:14px}
.site-links a:nth-child(1){left:14%;top:9svh;transform:translateX(-50%)}
.site-links a:nth-child(2){left:43%;top:20svh;transform:translateX(-50%)}
.site-links a:nth-child(3){left:70%;top:8svh;transform:translateX(-50%)}
.site-links .contact-link{left:86%;top:26svh;transform:translateX(-50%);border:0;margin:0;padding:12px}
@media(max-width:700px){
  .site-links{top:0;height:43svh}
  .site-links a{font-size:12px}
  .site-links a:nth-child(1){left:20%;top:8svh}
  .site-links a:nth-child(2){left:62%;top:22svh}
  .site-links a:nth-child(3){left:77%;top:6svh}
  .site-links .contact-link{left:27%;top:37svh}
}
@media(max-height:550px){
  .site-links a:nth-child(1){top:5svh}
  .site-links a:nth-child(2){top:17svh}
  .site-links a:nth-child(3){top:4svh}
  .site-links .contact-link{top:24svh}
}

.site-links .about-link{left:23%;top:29svh;transform:translateX(-50%)}
@media(max-width:700px){.site-links .about-link{left:72%;top:43svh}}
@media(max-height:550px){.site-links .about-link{left:23%;top:30svh}}

/* The extended hills sit higher; retain only a small overlap with the lettering. */
html[data-layout=field] h1{bottom:calc(var(--field-height) * .84 - .10em)}

/* Keep composition and typography identical across the print explorations. */
html[data-layout=field] h1{font:400 var(--print-title)/.85 'Instrument Serif',Georgia,serif;letter-spacing:-.035em}
html[data-layout=field] .title-grass{font-style:italic}
html[data-layout=field] .company{font-family:'Instrument Serif',Georgia,serif;font-size:.18em}


/* About gathers the scattered links, leaving the landscape in place. */
.site-links a{transition:left .85s cubic-bezier(.22,1,.36,1),top .85s cubic-bezier(.22,1,.36,1);transition-delay:0s}
.site-links a:nth-child(2){transition-delay:45ms}
.site-links a:nth-child(3){transition-delay:90ms}
.site-links .about-link{transition-delay:135ms}
.site-links .contact-link{transition-delay:180ms}
.is-about .site-links a{top:28px}
.is-about .site-links a:nth-child(1){left:calc(50% - 240px)}
.is-about .site-links a:nth-child(2){left:calc(50% - 115px)}
.is-about .site-links a:nth-child(3){left:calc(50% + 25px)}
.is-about .site-links .about-link{left:calc(50% + 135px)}
.is-about .site-links .contact-link{left:calc(50% + 240px)}
.about-story{position:absolute;z-index:4;top:clamp(115px,14svh,155px);left:50%;width:min(720px,calc(100% - 48px));transform:translate(-50%,20px);text-align:center;color:var(--ink);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .5s ease,visibility 0s .5s}
.about-story h2{font:400 50px/1.06 'Instrument Serif',Georgia,serif;letter-spacing:-.7px;margin:0 0 24px}
.about-story p{font:400 16px/1.65 'DM Mono',monospace;margin:0 auto 16px;max-width:680px;text-wrap:pretty}
.is-about .about-story{visibility:visible;opacity:1;transform:translate(-50%,0);pointer-events:auto;transition:opacity .6s .3s,transform .8s .3s,visibility 0s}
.about-story p{opacity:0;transform:translateY(10px);transition:opacity .25s,transform .3s}
.is-about .about-story p{opacity:1;transform:translateY(0);transition:opacity .65s .45s,transform .7s .45s}
.is-about .about-story p:last-child{transition-delay:.58s}
@media(min-width:701px) and (max-height:740px){
  .about-story{top:92px;width:calc(100% - 70px)}
  .about-story h2{font-size:34px;margin-bottom:14px}
  .about-story p{font-size:12px;margin-bottom:10px;max-width:760px}
}
@media(max-width:700px){
  .is-about .site-links a:nth-child(1){left:15%;top:20px}
  .is-about .site-links a:nth-child(2){left:49%;top:20px}
  .is-about .site-links a:nth-child(3){left:83%;top:20px}
  .is-about .site-links .about-link{left:32%;top:66px}
  .is-about .site-links .contact-link{left:68%;top:66px}
  .about-story{top:151px;width:calc(100% - 48px)}
  .about-story h2{font-size:42px;margin-bottom:24px}
  .about-story p{font-size:14px;line-height:1.7;margin-bottom:20px}
}
@media(max-width:700px) and (max-height:740px){
  .about-story{top:137px}
  .about-story h2{font-size:36px;margin-bottom:18px}
  .about-story p{font-size:13px;line-height:1.6;margin-bottom:15px}
}
@media(max-height:550px){
  .is-about .site-links a:nth-child(1){left:12%;top:12px}
  .is-about .site-links a:nth-child(2){left:34%;top:12px}
  .is-about .site-links a:nth-child(3){left:57%;top:12px}
  .is-about .site-links .about-link{left:74%;top:12px}
  .is-about .site-links .contact-link{left:89%;top:12px}
  .about-story{top:82px;width:calc(100% - 60px)}
  .about-story h2{font-size:30px;margin-bottom:12px}
  .about-story p{font-size:11px;line-height:1.5;margin-bottom:10px;max-width:670px}
}
@media(prefers-reduced-motion:reduce){.site-links a,.about-story,.about-story p{transition:none!important}.about-story p{transform:none}.about-story,.is-about .about-story{transform:translateX(-50%)}}

/* The original introduction needs room for its two-line heading. */
.about-story{top:clamp(104px,12svh,135px)}
.about-story h2{font-size:44px;line-height:1.06;max-width:640px;margin:0 auto 20px;text-wrap:balance}
.about-story p{max-width:680px;margin-bottom:18px}
.about-story .about-invitation{margin-top:20px;margin-bottom:0}
@media(min-width:701px) and (max-height:740px){
  .about-story{top:88px}
  .about-story h2{font-size:32px;max-width:760px;margin-bottom:12px}
  .about-story p{font-size:12px;max-width:760px;margin-bottom:10px}
  .about-story .about-invitation{margin-top:12px}
}
@media(max-width:700px){
  .about-story{top:145px}
  .about-story h2{font-size:36px;max-width:400px;margin-bottom:22px}
  .about-story p{font-size:14px;line-height:1.65;margin-bottom:20px}
  .about-story .about-invitation{margin-top:24px}
}
@media(max-width:700px) and (max-height:740px){
  .about-story{top:132px}
  .about-story h2{font-size:32px;margin-bottom:17px}
  .about-story p{font-size:13px;line-height:1.55;margin-bottom:16px}
  .about-story .about-invitation{margin-top:18px}
}
@media(max-height:550px){
  .about-story{top:75px}
  .about-story h2{font-size:28px;max-width:760px;margin-bottom:10px}
  .about-story p{font-size:11px;line-height:1.5;max-width:760px;margin-bottom:8px}
  .about-story .about-invitation{margin-top:10px}
}