@property --wash-top{syntax:'<color>';inherits:true;initial-value:#d6dfd0}
@property --wash-bottom{syntax:'<color>';inherits:true;initial-value:#e2e6cf}
:root{font-family:'Zodiak',Georgia,serif;font-weight:400;color:#161616;background:#fff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}button,input,summary{font:inherit}button,summary{cursor:pointer}button{color:inherit}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid #7489ae;outline-offset:5px}[hidden]{display:none!important}
.home{position:relative;min-height:760px;height:100svh;isolation:isolate;overflow:hidden;transition:--wash-top 1450ms ease,--wash-bottom 1450ms ease}
h1{position:absolute;z-index:2;left:3.1vw;top:6.1vh;margin:0;font-family:'Zodiak',Georgia,serif;font-size:clamp(101px,11.9vw,202px);font-weight:400;line-height:.82;letter-spacing:-.045em;pointer-events:none}
.scene{position:absolute;z-index:0;left:27%;right:-8%;top:7vh;bottom:7vh;margin:0;overflow:hidden;background:#fff}
.scene>img,.scene canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}.scene canvas{pointer-events:none}.scene.dots:not(.original)>img{opacity:0}.scene.dots:not(.original) #colour{visibility:hidden}.scene.original canvas{visibility:hidden}
.scene[data-edge=dissolve]>img,.scene[data-edge=dissolve] #colour{mask-image:var(--landscape-mask,linear-gradient(to right,transparent 1%,#000 8%));-webkit-mask-image:var(--landscape-mask,linear-gradient(to right,transparent 1%,#000 8%));mask-size:100% 100%;-webkit-mask-size:100% 100%}
.next-photo-hit{position:absolute;z-index:3;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:url("plus-cursor.svg") 12 12,crosshair}.next-photo-hit:focus-visible{outline-offset:-6px}.another-view{border:0;padding:5px 0;background:transparent;font-size:inherit;color:inherit}.another-view:hover{text-decoration:underline;text-underline-offset:5px}
.information{position:absolute;z-index:2;left:3.4vw;bottom:11vh;font-size:15.6px;line-height:1.6;max-width:36vw}.now{margin:0}.now>div{display:grid;grid-template-columns:146px 1fr;column-gap:25px}.now dt,.now dd{margin:0}.pages{display:flex;flex-direction:column;margin:36px 0}.contact{display:flex;gap:22px;font-size:14.4px}.contact a{color:#565656}
.preview-tools{position:absolute;z-index:4;right:3vw;bottom:2.8vh;display:flex;align-items:center;gap:30px;font-size:11px;color:#666}.edges{display:flex;gap:18px}.edges button{padding:5px 0;border:0;background:transparent}.edges button[aria-pressed=true]{color:#161616;text-decoration:underline;text-underline-offset:5px}.adjust summary{list-style:none;padding:5px 0}.adjust summary::-webkit-details-marker{display:none}.adjust summary::after{content:' +';font-size:13px}.adjust[open] summary::after{content:' −'}
.adjust-panel{position:absolute;right:0;bottom:38px;width:310px;padding:22px;background:#fff;border:1px solid #dedee5;box-shadow:0 8px 35px #0000000d;font-size:12px;color:#252525}.adjust-panel fieldset{border:0;margin:0 0 20px;padding:0}.adjust-panel legend{margin-bottom:10px;color:#777}.options{display:flex;flex-wrap:wrap;gap:7px}.options button{font-size:11px;padding:8px 10px;border:1px solid #ddd;background:#fff}.options button[aria-pressed=true]{border-color:#343434}.adjust-panel label{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px}.adjust-panel input{width:145px;accent-color:#7d83a9}.study-link{display:inline-block;margin-top:20px;color:#777}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#status{position:absolute;bottom:0;left:3.4vw;font-size:12px}
@media(min-width:1800px){.information{font-size:18px}.now>div{grid-template-columns:170px 1fr;column-gap:28px}.contact{font-size:15.6px}}
@media(max-width:1100px) and (min-width:701px){h1{font-size:12.2vw}.scene{left:25%}.information{font-size:13.2px;max-width:38vw}.now>div{grid-template-columns:120px 1fr;column-gap:12px}}
@media(max-width:700px){.home{height:auto;min-height:100svh;overflow:visible;padding:30px 0 24px;display:flex;flex-direction:column}h1{position:relative;top:auto;left:auto;margin:0 6%;font-size:clamp(81px,20.7vw,130px);line-height:.82}.scene{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:28px 0 0 6%;height:53svh;min-height:330px}.information{position:relative;left:auto;bottom:auto;margin:32px 6% 0;max-width:none;font-size:14.4px}.now>div{grid-template-columns:140px 1fr;column-gap:12px}.pages{margin:24px 0;flex-direction:row;gap:24px}.contact{gap:24px}.preview-tools{position:relative;right:auto;bottom:auto;justify-content:space-between;flex-wrap:wrap;gap:16px 22px;margin:32px 6% 0;font-size:11px}.adjust-panel{width:min(310px,88vw)}#status{position:relative;left:auto;margin:0}}
#photo-count{margin-left:8px;color:#8a8a8a;font-variant-numeric:tabular-nums}.adjust-panel select{width:100%;padding:9px 8px;background:#fff;color:#252525;border:1px solid #ddd;font:inherit}.adjust-panel select:focus-visible{outline:2px solid #7489ae;outline-offset:3px}

.scene.changing-photo:not(.original)>img,.scene.changing-photo:not(.original) #colour{visibility:hidden}


/* The same photo palette carries into a quiet field of fine, staggered dots. */
.home::before{opacity:.55;content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.1) 32%,transparent 65%),radial-gradient(ellipse at 38% 18%,var(--wash-top) 12%,transparent 90%),radial-gradient(ellipse at 60% 92%,var(--wash-bottom) 18%,transparent 95%),#fff}
@media(prefers-reduced-motion:reduce){.home{transition:none}}

.home::after{opacity:.5;content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(155deg,color-mix(in srgb,var(--wash-top) 85%,#161616),color-mix(in srgb,var(--wash-bottom) 85%,#161616));-webkit-mask-image:radial-gradient(circle,#000 .75px,transparent 1.15px),radial-gradient(circle,#000 .75px,transparent 1.15px);mask-image:radial-gradient(circle,#000 .75px,transparent 1.15px),radial-gradient(circle,#000 .75px,transparent 1.15px);-webkit-mask-size:4.5px 7.794px;mask-size:4.5px 7.794px;-webkit-mask-position:0 0,2.25px 3.897px;mask-position:0 0,2.25px 3.897px;-webkit-mask-repeat:repeat;mask-repeat:repeat}

/* Full-page photograph study; the existing text anchors stay in place. */
.home.full-bleed::before,.home.full-bleed::after{display:none}
.home.full-bleed .scene{position:absolute;inset:0;width:auto;height:auto;min-height:0;margin:0}
@media(max-width:700px){.home.full-bleed .information{margin-top:calc(max(330px,53svh) + 60px)}}

.home.full-bleed{color:#fff}
.home.full-bleed h1{left:3.1vw;right:3.1vw;margin:0;text-align:center;white-space:nowrap;word-spacing:.1em;font-size:clamp(32px,11.9vw,202px);line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.18)}
.home.full-bleed .information{text-shadow:0 1px 4px rgba(0,0,0,.7)}
.home.full-bleed .contact a{color:inherit}


.home.full-bleed .scene::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 36%),linear-gradient(90deg,rgba(0,0,0,.18),transparent 60%)}
@media(max-width:700px){.home.full-bleed h1{left:auto;right:auto;margin:0 6%}.home.full-bleed .information{margin-top:auto;padding-top:60px}}

/* Let the dotted page show through until the photo is ready to fade in. */
.image-reveals .home .scene:not(:has(canvas.image-revealed)) { background: transparent; }

.image-reveals .home .scene { transition: background-color 720ms cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .image-reveals .home .scene { transition: none; } }