/* Botanical print colors, with a quieter surround for the art. */
:root {
  --forest:#123e2c;
  --ink:#172d23;
  --lime:#ddfc69;
  --petal:#ffaacb;
  --orchid:#d4baff;
  --paper:#fff6d9;
  --gutter:clamp(22px,6vw,100px);
}
body{background:var(--forest);color:var(--paper)}
main{padding:0}
header{position:relative;background:#102e23;color:var(--paper);border:0}
header::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#fd8968,#ffbd65,#e9ee69,#83daa1,#83caff,#d0a6fe,#ffaacb)}
.brand img{mix-blend-mode:screen;filter:grayscale(1) invert(1);width:40px}
.brand b{font-family:Georgia,serif;letter-spacing:-.04em;font-size:23px}
.contact,.explore{background:var(--lime);color:var(--ink);font-weight:700}
a:focus-visible,button:focus-visible,#wall:focus-visible{outline:3px solid #eb74b1;outline-offset:4px}
nav .contact:hover,.explore:hover{background:#f4ffa6;color:#153526}
.hero{position:relative;isolation:isolate;padding:clamp(46px,5vw,90px) var(--gutter);border:0;background:radial-gradient(ellipse at 75% 6%,#386e48,transparent 56%),#153f2e;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(#eef8af28 .7px,transparent .9px) 0 0/5px 5px;opacity:.32}
.tag{color:var(--lime);font-weight:bold;letter-spacing:1.4px}
.tag i{width:13px;height:13px;border-radius:0;background:var(--petal);clip-path:polygon(50% 0,59% 32%,85% 15%,68% 41%,100% 50%,68% 59%,85% 85%,59% 68%,50% 100%,41% 68%,15% 85%,32% 59%,0 50%,32% 41%,15% 15%,41% 32%)}
h1{color:var(--paper);font-size:clamp(76px,8.6vw,150px);letter-spacing:-.073em}
h1 em{color:var(--petal);text-shadow:2px 3px #53323f}
.intro p{color:#f0efd9;font-size:clamp(16px,1.25vw,20px)}
.intro .explore{box-shadow:3px 4px 0 #071d13;transition:transform .2s}
.intro .explore:hover{transform:translateY(-2px)}
.desk{color:var(--ink);border:6px solid #f4eac7;border-radius:3px;box-shadow:3px 4px 0 #9278ad,6px 8px 0 #082b1c60;transform:rotate(1deg);background-color:#c8b6df;background-image:radial-gradient(#70508755 .85px,transparent 1px),repeating-linear-gradient(110deg,#ffffff14 0 2px,transparent 2px 5px);background-size:5px 5px,auto}
.tape{background:repeating-linear-gradient(90deg,#ec806d 0 16.67%,#edab61 16.67% 33.33%,#e0cf66 33.33% 50%,#8dbf86 50% 66.67%,#81afd4 66.67% 83.33%,#b99ad6 83.33%);opacity:.9}
.flower-pin{position:absolute;z-index:2;top:1%;right:1%;font:clamp(38px,5.8vw,100px)/1 Georgia,serif;color:#fd7ea7;transform:rotate(15deg);text-shadow:1px 2px #803552;pointer-events:none}
.garden-band{display:flex;align-items:center;gap:22px;padding:11px var(--gutter);background:var(--lime);color:#213a24;font:bold 10px/1.4 monospace;letter-spacing:2px}.garden-band i{flex:1;height:8px;background:repeating-linear-gradient(115deg,transparent 0 5px,#2b523c 5px 6px)}
#photos,#paint{padding:clamp(48px,5vw,84px) var(--gutter)}
#photos{background:radial-gradient(ellipse at 5% 80%,#38324a,transparent 55%),#211e2d;color:#fff1df}
#photos .kicker,.rollbox .kicker{color:var(--orchid)}
.heading{position:relative;margin-bottom:30px}
#photos .heading::after{content:"";position:absolute;left:clamp(390px,32vw,550px);right:29%;height:70px;bottom:-7px;background:url('media/oscillator.svg') center/100% 100% no-repeat;pointer-events:none}
#photos h2 span{color:#ef9ccc}
#photos .heading p{color:#e5dce8}
.instrument-caption,#photos .controls span{color:#d1c3d8}
.roll{color:var(--paper);border-color:#61516a}
.roll small{color:#d7c9de}
.roll[aria-pressed=true]::after{color:var(--lime)}
.roll[aria-pressed=true]::before{color:var(--lime);border-color:#929874}
#gallery{background:#dbc3ff;color:#21172c;border-color:#dbc3ff}
#paint{color:#2d3226;background:#f7eedc}
#paint .kicker{color:#5d5345}
#paint h2 span{color:#b54d76}
#wall{border-radius:4px;border:1px solid #bcae98;background:radial-gradient(ellipse at 50% 12%,#fff4d9,#e4d6c3 60%,#cdb9ac);box-shadow:0 4px 0 #ccbca8}
footer{position:relative;isolation:isolate;overflow:hidden;background:#194631}

.postcard{border-image:repeating-linear-gradient(130deg,#b45679 0 15px,#f2ead2 15px 30px,#698773 30px 45px,#f2ead2 45px 60px) 8;box-shadow:5px 8px 0 #10291f}
dialog{color:var(--ink)}

@media(max-width:1000px){#photos .heading::after{display:none}}
@media(max-width:720px){
  .hero{padding:38px var(--gutter) 36px}

  .intro{position:relative}.tag{font-size:9px}
  h1{font-size:clamp(74px,15vw,98px)}
  .brand b{font-size:18px}.brand img{width:32px}
  .garden-band{gap:10px;padding-inline:16px;font-size:8px;letter-spacing:.8px}
  .desk{border-width:4px}
}

/* Seasonal color moves through the page; the margins hold the only drawings. */
.seasonal-garden .hero {
  background:linear-gradient(175deg,#234735,#203e31 80%,#203c32);
}
.seasonal-garden .hero::after {content:none}
.garden-band {background:#203c32;color:#b1c2a1}
.garden-band i {height:1px;background:#76927c55}
.seasonal-garden #photos {
  background:linear-gradient(#203c32,#243831 26%,#293731 78%,#303932);
}
.seasonal-garden #paint {
  color:#f3ecdf;background:linear-gradient(#303932,#3e3c32 34%,#403d34 76%,#383c37);
}
#paint .heading p,#paint .kicker {color:#d5cebf}
#paint h2 span {color:#d4ae84}
.seasonal-garden footer {background:linear-gradient(#383c37,#2e393a 52%,#293839)}
.seasonal-garden :is(#photos,#paint) {position:relative;isolation:isolate}
/* Each drawing lives on the line between rooms. */
.garden-link {
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 var(--gutter);height:56px;background:var(--seam-color);
}
.garden-link::before,.garden-link::after {
  content:"";height:1px;background:linear-gradient(90deg,transparent,#91ae8566);
  flex:1;margin-bottom:11px;
}
.garden-link::after {transform:scaleX(-1);margin-bottom:23px}
.garden-link img {display:block;width:200px;height:auto}
.garden-link.spring {--seam-color:#203c32}
.garden-link.summer {--seam-color:#303932}
.garden-link.winter {--seam-color:#383c37}
.garden-link.winter::after {margin-bottom:35px}
#photos .heading::after {opacity:.45}
.postcard {max-width:970px;margin-inline:auto}
@media(max-width:720px){
  .garden-link {height:49px}
  .garden-link img {width:164px}
}

/* Sparse, continuous field sketches in the page gutters. */
.seasonal-garden {position:relative}
.habitat-margin {
  position:absolute;inset-block:0;z-index:1;width:min(5.4vw,82px);
  pointer-events:none;color:#aabfa1;
}
.habitat-margin.west{left:0}
.habitat-margin.east{right:0}
.habitat-stem{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.habitat-stem path{fill:none;stroke:currentColor;stroke-width:1;opacity:.23}
.east .habitat-stem{transform:scaleX(-1)}
.specimen {
  position:absolute;left:50%;width:clamp(24px,3.4vw,48px);
  fill:none;stroke:#c8cfad;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transform:translateX(-50%) rotate(var(--lean));opacity:.6;
}
@media(max-width:720px) {
  .habitat-margin{width:19px}
  .specimen{width:20px;opacity:.52}
}