* { box-sizing:border-box; } body { margin:0; font-family:Inter,system-ui,sans-serif; background:#faf8f3; color:#222722; line-height:1.55; } a { color:inherit; text-decoration:none; } #main-header { position:sticky; top:0; z-index:20; width:100%; padding:0 24px; } .nav-wrapper { max-width:1120px; min-height:76px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand-logo { display:flex; align-items:center; gap:14px; min-width:0; } .brand-logo img { width:54px; height:54px; object-fit:cover; border-radius:50%; } nav ul { display:flex; align-items:center; gap:10px; margin:0; padding:0; list-style:none; } nav a { font:500 14px Inter,sans-serif; color:#40483f; } .dark-btn,.mobile-menu-btn { border:0; cursor:pointer; background:transparent; color:#263329; } .dark-btn { font-size:18px; } .mobile-menu-btn { display:none; font-size:24px; } .weather-page { max-width:1120px; margin:0 auto; padding:54px 22px 84px; }
.weather-hero { display:flex; align-items:end; justify-content:space-between; gap:30px; padding:20px 0 42px; }
.weather-hero h1 { margin:10px 0 14px; font:700 clamp(42px,7vw,76px)/1 Inter,sans-serif; letter-spacing:-3px; }.weather-hero h1 em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }.weather-hero p { max-width:620px; color:#596058; font-size:17px; line-height:1.7; }
.share-weather { border:1px solid #9b6309; background:transparent; color:#6f4807; border-radius:10px; padding:13px 17px; font:600 14px Inter,sans-serif; white-space:nowrap; cursor:pointer; }.share-weather:hover { background:#f3e9d3; }
.current-weather { padding:34px 38px; border-radius:20px; background:#24342b; color:#f9f5e9; display:grid; grid-template-columns:1fr auto; gap:4px 24px; }.weather-kicker { font:600 12px Inter,sans-serif; letter-spacing:1.1px; text-transform:uppercase; opacity:.8; }.current-weather strong { font:700 clamp(58px,8vw,92px)/.9 Inter,sans-serif; letter-spacing:-5px; }.current-weather > span:not(.weather-kicker) { font-size:14px; }.current-weather a { grid-column:1; font-size:14px; font-weight:600; color:#f0ca75; margin-top:12px; }.current-weather p { grid-column:2; grid-row:1 / span 4; align-self:center; margin:0; max-width:330px; font-size:13px; line-height:1.55; opacity:.82; }
.forecast-section { padding-top:60px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }.section-heading h2 { margin:7px 0 0; font:600 30px Inter,sans-serif; }.section-heading p { max-width:360px; margin:0; color:#62685e; font-size:14px; line-height:1.5; }.forecast-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }.forecast-day { min-height:190px; display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid #deded3; border-radius:14px; background:#fffdfa; }.forecast-day time { text-transform:capitalize; color:#6b7168; font-size:13px; }.weather-icon { color:#bd7f18; font-size:32px; }.forecast-day strong { font:600 30px Inter,sans-serif; }.forecast-day strong small { color:#73786f; font-size:17px; font-weight:400; }.forecast-day > span:not(.weather-icon) { color:#666d64; font-size:12px; line-height:1.4; }.weather-disclaimer { margin-top:24px; color:#666d64; font-size:12px; line-height:1.6; }
body.dark-mode .weather-hero p, body.dark-mode .section-heading p, body.dark-mode .forecast-day > span:not(.weather-icon), body.dark-mode .weather-disclaimer { color:#c8ccc4; } body.dark-mode .forecast-day { background:#202520; border-color:#42483e; } body.dark-mode .forecast-day strong { color:#f6f3eb; } body.dark-mode .share-weather { color:#f0ca75; border-color:#c79128; } body.dark-mode .share-weather:hover { background:#353024; }
@media (max-width:720px) { #main-header{padding:0 16px}.nav-wrapper{min-height:66px}.mobile-menu-btn{display:block}nav#nav-menu{display:none;width:100%;padding:10px 0;border-top:1px solid #deded3}nav#nav-menu.nav-open{display:block}nav ul{align-items:stretch;flex-direction:column;gap:2px}nav a{display:block;padding:10px 0}.weather-page{padding:28px 16px 60px}.weather-hero,.section-heading{align-items:flex-start;flex-direction:column}.weather-hero{padding-bottom:28px}.forecast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.forecast-day{min-height:160px;padding:16px}.current-weather{padding:28px;grid-template-columns:1fr}.current-weather p{grid-column:1;grid-row:auto;margin-top:16px}.current-weather strong{letter-spacing:-3px} }