:root{--ink:#17221e;--muted:#74817c;--line:#dce5df;--paper:#f4f7f3;--green:#d8efdf;--lime:#dcf17c;--orange:#ee8a54;--dark:#1d2b25}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif}.weather-app{min-height:100vh}.topbar{border-bottom:1px solid var(--line);background:#f8faf7;align-items:center;gap:34px;height:72px;padding:0 clamp(22px,6vw,96px);display:flex}.brand{letter-spacing:-1px;color:var(--ink);align-items:center;gap:8px;font-size:21px;font-weight:700;text-decoration:none;display:flex}.brand-mark{color:#4f8f67;font-size:27px;line-height:1}.brand-dot{color:var(--orange)}.nav-label{letter-spacing:2.2px;color:#9ca8a2;font-size:10px;font-weight:700}.nav-status{color:#7e8b84;align-items:center;gap:8px;margin-left:auto;font-size:12px;display:flex}.status-dot{background:#74bb75;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #e1f1e2}.hero{background:var(--green);padding:clamp(58px,8vw,110px) clamp(22px,11vw,180px) 52px;position:relative;overflow:hidden}.hero:after{content:"";border:1px solid #2c6a4021;border-radius:50%;width:540px;height:540px;position:absolute;top:-235px;right:-115px;box-shadow:0 0 0 30px #2c6a4008,0 0 0 80px #2c6a4006}.hero-copy{z-index:1;max-width:680px;position:relative}.eyebrow{letter-spacing:2.4px;color:#62806d;margin:0 0 17px;font-size:10px;font-weight:700}.hero h1{letter-spacing:-5px;margin:0 0 26px;font-family:Georgia,serif;font-size:clamp(48px,7vw,90px);font-weight:400;line-height:.94}.hero h1 em{color:#46835a;font-style:italic}.lede{color:#527062;margin:0;font-size:16px;line-height:1.5}.search{z-index:1;border-bottom:1px solid #9bbcac;align-items:center;max-width:570px;margin:54px 0 14px;padding:0 0 12px;display:flex;position:relative}.search span{color:#5e866d;margin-right:12px;font-size:25px}.search input{color:var(--ink);background:0 0;border:0;outline:none;width:100%;font-size:18px}.search input::placeholder{color:#789588}.search button,.presets button{color:#547560;letter-spacing:1.1px;text-transform:uppercase;cursor:pointer;background:0 0;border:0;font-size:11px;font-weight:700}.presets{z-index:1;gap:20px;display:flex;position:relative}.presets button{letter-spacing:.8px;color:#6a8977;font-size:10px}.dashboard{max-width:1110px;margin:0 auto;padding:64px 24px 80px}.location-row{justify-content:space-between;align-items:end;margin-bottom:25px;display:flex}.location-row h2{letter-spacing:-1.5px;margin:0;font-family:Georgia,serif;font-size:32px;font-weight:400}.location-row h2 span{color:#87938d;font-size:19px}.coordinates{color:var(--muted);letter-spacing:1px;font-size:11px}.primary-grid{grid-template-columns:1fr 1fr;gap:18px;display:grid}.current-card,.wind-card{background:var(--dark);color:#fff;min-height:350px;padding:29px 32px;position:relative;overflow:hidden}.current-card:after{content:"☼";color:#263b32;opacity:.85;font-size:285px;line-height:1;position:absolute;bottom:-53px;right:-5px}.wind-card{background:var(--lime);color:var(--ink)}.wind-card:after{content:"";border:1px solid #17221e2e;border-radius:50%;width:260px;height:260px;position:absolute;top:54px;right:-76px;box-shadow:0 0 0 22px #17221e0a,0 0 0 60px #17221e06}.card-top{letter-spacing:2px;color:#aab8b1;justify-content:space-between;font-size:10px;font-weight:700;display:flex}.wind-card .card-top{color:#68744c}.temperature{letter-spacing:-9px;z-index:1;margin-top:46px;font-family:Georgia,serif;font-size:112px;line-height:1;position:relative}.temperature sup{letter-spacing:0;vertical-align:top;font-family:Arial,sans-serif;font-size:33px;line-height:1.5}.condition-line{color:#a8bbb0;z-index:1;align-items:center;gap:11px;font-size:13px;display:flex;position:relative}.big-glyph{color:#ffd073;font-size:31px}.card-footer{color:#a8bbb0;z-index:1;gap:22px;font-size:12px;display:flex;position:absolute;bottom:29px}.wind-reading{z-index:1;align-items:baseline;gap:9px;margin-top:47px;display:flex;position:relative}.wind-reading strong{letter-spacing:-8px;font-family:Georgia,serif;font-size:105px;font-weight:400}.wind-reading span{color:#657150;font-size:14px}.wind-direction{z-index:1;align-items:center;gap:13px;margin-top:7px;display:flex;position:relative}.direction-arrow{color:#4f6a42;font-size:33px;line-height:1;display:inline-block}.wind-direction strong{font-size:16px;display:block}.wind-direction span{color:#788360;margin-top:3px;font-size:11px;display:block}.wind-scale{letter-spacing:1.4px;color:#66724e;align-items:center;gap:10px;font-size:8px;display:flex;position:absolute;bottom:31px;left:32px;right:32px}.scale-line{background:#bfd15e;flex:1;height:3px;position:relative}.scale-line i{background:var(--ink);width:43%;height:3px;display:block}.metrics{border-bottom:1px solid var(--line);grid-template-columns:repeat(4,1fr);margin-bottom:52px;padding:30px 0 28px;display:grid}.metrics div{border-right:1px solid var(--line);padding-left:25px}.metrics div:first-child{padding-left:0}.metrics div:last-child{border:0}.metrics span{letter-spacing:1.6px;color:#87938d;margin-bottom:12px;font-size:9px;font-weight:700;display:block}.metrics strong{font-size:23px;font-weight:400}.metrics small{color:#8c9992;font-size:11px}.section-heading{justify-content:space-between;align-items:end;margin-bottom:21px;display:flex}.section-heading h3{letter-spacing:-1px;margin:0;font-family:Georgia,serif;font-size:27px;font-weight:400}.muted{color:#9aa6a0;font-size:11px}.hourly-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(8,1fr);margin-bottom:54px;display:grid}.hour{text-align:center;border-right:1px solid var(--line);flex-direction:column;gap:13px;padding:17px 7px 19px;display:flex}.hour:last-child{border:0}.hour>span{color:#87938d;font-size:10px}.hour b{color:#82a98b;font-size:28px;font-weight:400;line-height:1}.hour strong{font-size:20px;font-weight:400}.hour small{color:#829189;font-size:9px}.loading-copy{color:var(--muted);padding:35px;font-size:13px}.forecast-heading{margin-bottom:20px}.daily-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(7,1fr);display:grid}.day{text-align:center;border-right:1px solid var(--line);flex-direction:column;gap:12px;padding:20px 10px 22px;display:flex}.day:last-child{border:0}.day>strong{font-size:11px}.day-glyph{color:#83a88c;font-size:27px}.day div{justify-content:center;gap:7px;font-size:14px;display:flex}.day div span{color:#99a49e}.day small{color:#89958e;min-height:20px;font-size:9px}footer{border-top:1px solid var(--line);letter-spacing:1.5px;color:#a0aba5;justify-content:space-between;padding:24px clamp(22px,6vw,96px);font-size:9px;display:flex}.error{color:#c25f44;max-width:1110px;margin:24px auto 0;padding:0 24px;font-size:13px}@media (width<=760px){.topbar{gap:15px}.nav-label{display:none}.hero{padding-top:60px}.hero h1{letter-spacing:-3px}.dashboard{padding-top:42px}.location-row{display:block}.coordinates{margin-top:13px}.primary-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr);gap:25px}.metrics div:nth-child(3){padding-left:0}.metrics div:nth-child(2){border:0}.hourly-row{display:flex;overflow-x:auto}.hour{min-width:90px}.daily-row{display:flex;overflow-x:auto}.day{min-width:105px}.footer{display:block}footer{line-height:2.3;display:block}.nav-status{font-size:10px}.hero:after{right:-290px}}
