.search{
  position:relative;isolation:isolate;align-items:center;gap:0;
  width:min(610px,48vw);height:54px;min-width:0;padding:4px;
  overflow:visible;border:2px solid #704a20;border-radius:8px;
  background:linear-gradient(180deg,#f6df9d,#b07b34 8%,#604019 14%,#d2aa62 21%,#fff6dc 31%,#fbefd0 83%,#9a6929 95%,#f2d18a);
  box-shadow:inset 0 0 0 1px #fff3c7,0 2px 4px #00132199;
}
.search:before{content:"";position:absolute;z-index:-1;inset:4px;border:1px solid #b9a37a;border-radius:3px;background:linear-gradient(#fffdf5,#f2ead8 55%,#e5dcc9);box-shadow:inset 0 1px 2px #49391f40}
.search:focus-within{box-shadow:inset 0 0 0 1px #fff3c7,0 0 0 2px #f5d77b88,0 2px 4px #00132199}
.search__icon{flex:0 0 38px;width:38px;height:34px;margin-left:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='8' fill='none' stroke='%2342535e' stroke-width='3'/%3E%3Cpath d='m19 19 7 7' stroke='%2342535e' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/26px 26px no-repeat;filter:drop-shadow(0 1px #fff)}
.search input[type="search"]{flex:1;min-width:0;height:100%;padding:0 10px;border:0;outline:0;background:transparent;color:#273c4c;font:500 16px/1.4 var(--reading-font);appearance:none}
.search input[type="search"]::placeholder{color:#58616a;opacity:1}
.search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.search button{flex:0 0 112px;align-self:stretch;min-width:90px;padding:0 14px;border:1px solid #071d35;border-radius:5px;background:linear-gradient(180deg,#3178aa 0%,#0d4e7d 18%,#0a3e6a 75%,#052b50 100%);box-shadow:inset 0 1px #8ec0df,inset 0 0 0 2px #174e78,0 1px 2px #33230f80;color:#fff8e9;font:700 18px/1.2 var(--reading-font);text-shadow:0 1px 2px #00172b}
.search button:hover{filter:brightness(1.2) saturate(1.2);box-shadow:inset 0 1px #c0e7fa,inset 0 0 0 2px #2878a8,0 0 9px #80c8f488,0 1px 2px #33230f80}
.search button:active{filter:brightness(.94);box-shadow:inset 0 2px 5px #00172b99}
.search button:focus-visible{outline:2px solid #fff1ad;outline-offset:2px}
@media(max-width:1240px) and (min-width:901px){.search{width:min(500px,42vw);height:50px}.search button{flex-basis:98px;font-size:17px}}
@media(max-width:1100px) and (min-width:901px){.search{width:100%;height:50px;margin:0}.search__icon{flex-basis:32px;width:32px;height:30px;background-size:23px}.search input[type="search"]{font-size:15px}.search button{flex-basis:78px;min-width:70px;padding-inline:8px;font-size:16px}}
@media(max-width:900px){.search{width:100%;height:50px;margin:0}.search__icon{flex-basis:32px;width:32px;height:30px;background-size:23px}.search input[type="search"]{font-size:15px}.search button{flex-basis:78px;min-width:70px;padding-inline:8px;font-size:16px}}
@media(max-width:380px){.search{height:46px}.search__icon{flex-basis:28px;width:28px;background-size:21px}.search input[type="search"]{padding-inline:5px;font-size:14px}.search button{flex-basis:68px;min-width:64px;font-size:15px}}

/* Cross-fade the blue enamel instead of switching gradients abruptly. */
.search button{position:relative;isolation:isolate;transition:filter .45s ease,box-shadow .45s ease}
.search button:before{content:"";position:absolute;z-index:-1;inset:2px;border-radius:3px;pointer-events:none;background:linear-gradient(180deg,#62a9d4 0%,#176da4 20%,#0c5690 76%,#073b69 100%);opacity:0;transition:opacity .45s ease}
.search button:hover:before{opacity:1}
@media(prefers-reduced-motion:reduce){.search button,.search button:before{transition:none}}