:root { --ink: #2d2826; --muted: #81746c; --paper: #f7f1e9; --line: rgba(45,40,38,.17); --accent: #ed755d; --sun: #ffd673; --sky: #c9e3e1; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, textarea, input { font: inherit; } button { cursor: pointer; }
.weather-shell { max-width: 1440px; margin: auto; padding: 0 5vw; overflow: hidden; }
.project-nav { height: 84px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.back-link { color: var(--muted); }.back-link:hover { color: var(--ink); }.project-id { display: flex; gap: 15px; }.project-id span { color: var(--muted); }.project-id strong { color: var(--accent); font-weight: 400; }.nav-stamp { color: var(--muted); }
.weather-hero { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(450px, 1.2fr); gap: 9vw; align-items: center; min-height: 720px; padding: 84px 0 100px; }.eyebrow, .forecast-card-head, .forecast-card-foot, .intensity-row > label, .intensity-label, .history-heading button, .project-footer { font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .09em; }.eyebrow { color: var(--muted); margin: 0 0 26px; }.sun-mark { display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--sun); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,214,115,.22); }.hero-text h1 { margin: 0 0 29px; font-size: clamp(64px, 8.5vw, 124px); line-height: .79; letter-spacing: -.09em; font-weight: 600; }.hero-text h1 em, .history-heading h2 em { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -.09em; color: var(--accent); }.intro { max-width: 365px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.weather-form { margin-top: 53px; max-width: 420px; }.weather-form > label { display: block; margin-bottom: 10px; font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }.weather-form textarea { display: block; width: 100%; resize: vertical; min-height: 67px; padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); outline: 0; color: var(--ink); background: transparent; font-size: 17px; line-height: 1.35; }.weather-form textarea::placeholder { color: #aa9c93; }.condition-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 19px; }.condition { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 5px 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .05em; transition: .2s ease; }.condition:hover, .condition.is-active { border-color: var(--ink); color: var(--ink); background: rgba(255,255,255,.45); transform: translateY(-2px); }.condition.is-active { box-shadow: 3px 3px 0 var(--accent); }.condition-icon { position: relative; display: block; width: 27px; height: 27px; }.icon-sun { background: var(--sun); border-radius: 50%; }.icon-sun:before, .icon-sun:after { content: ''; position: absolute; inset: -5px; border: 1px dashed var(--accent); border-radius: 50%; }.icon-mist:before, .icon-mist:after, .icon-mist { border-top: 2px solid #9ebfc0; }.icon-mist { top: 8px; }.icon-mist:before, .icon-mist:after { content: ''; position: absolute; width: 21px; top: 7px; left: 3px; }.icon-mist:after { top: 14px; left: -3px; width: 28px; }.icon-rain:before { content: ''; position: absolute; width: 25px; height: 13px; top: 2px; left: 1px; border-radius: 14px 14px 5px 5px; background: #a8c8cb; }.icon-rain:after { content: '///'; position: absolute; top: 13px; left: 2px; color: #6ca5ae; font-size: 15px; letter-spacing: 2px; }.icon-wind:before, .icon-wind:after { content: ''; position: absolute; left: 0; width: 28px; height: 7px; border-top: 2px solid #9ebfc0; border-radius: 50%; }.icon-wind:before { top: 7px; }.icon-wind:after { top: 16px; width: 19px; left: 8px; }
.intensity-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 17px; margin-top: 25px; }.intensity-row > label { color: var(--muted); }.intensity-row input { width: 100%; accent-color: var(--accent); }.intensity-label { grid-column: 2; display: flex; justify-content: space-between; margin-top: -12px; color: #aa9c93; font-size: 8px; }.cast-button { display: flex; justify-content: space-between; width: 100%; margin-top: 28px; padding: 16px 17px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; transition: transform .2s, background .2s; }.cast-button:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }.cast-button span { transition: transform .2s; }.cast-button:hover span { transform: translate(3px,-3px); }
.forecast-column { display: flex; flex-direction: column; align-items: center; }.forecast-card { --card-sky: #c9e3e1; --card-accent: #ed755d; position: relative; width: min(100%, 560px); min-height: 585px; display: flex; flex-direction: column; padding: 23px 25px 20px; overflow: hidden; background: linear-gradient(155deg, var(--card-sky), #f4ddbb 70%); box-shadow: 16px 18px 0 rgba(45,40,38,.10); transition: background .35s; }.forecast-card:after { content: ''; position: absolute; width: 280px; height: 280px; right: -110px; top: 45px; border: 1px solid rgba(45,40,38,.14); border-radius: 50%; box-shadow: 0 0 0 40px rgba(255,255,255,.1), 0 0 0 80px rgba(255,255,255,.1); }.forecast-card-head, .forecast-card-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; color: rgba(45,40,38,.65); }.forecast-card-head { padding-bottom: 15px; border-bottom: 1px solid rgba(45,40,38,.18); }.forecast-scene { position: relative; height: 205px; }.scene-sun { position: absolute; width: 155px; height: 155px; top: 25px; left: 18%; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 17px rgba(255,214,115,.17), 0 0 50px rgba(255,214,115,.38); transition: transform .5s; }.scene-cloud { position: absolute; width: 230px; height: 63px; top: 129px; left: 33%; border-radius: 60px; background: #f8f0e6; box-shadow: 35px -34px 0 -5px #f8f0e6, -37px -13px 0 -16px #f8f0e6; transition: transform .5s; }.scene-rain, .scene-wind { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }.scene-rain i { position: absolute; width: 5px; height: 27px; top: 165px; left: 45%; border-radius: 8px; background: #6ca5ae; transform: rotate(23deg); }.scene-rain i:nth-child(2) { left: 54%; top: 178px; }.scene-rain i:nth-child(3) { left: 63%; top: 161px; }.scene-rain i:nth-child(4) { left: 72%; top: 177px; }.scene-wind i { position: absolute; width: 145px; height: 22px; right: 5%; top: 85px; border-top: 2px solid rgba(45,40,38,.38); border-radius: 50%; transform: rotate(-10deg); }.scene-wind i:nth-child(2) { top: 121px; right: -4%; width: 180px; }.scene-wind i:nth-child(3) { top: 159px; right: 19%; width: 98px; }.forecast-wording { position: relative; z-index: 2; flex: 1; }.forecast-condition { margin: 0 0 15px; color: var(--card-accent); font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .07em; }.forecast-wording h2 { max-width: 460px; margin: 0 0 18px; font-size: clamp(35px, 4vw, 53px); line-height: .95; letter-spacing: -.07em; font-weight: 600; }.forecast-wording > p:last-child { max-width: 270px; margin: 0; color: rgba(45,40,38,.63); font-size: 13px; line-height: 1.5; }.forecast-card-foot { align-items: center; padding-top: 16px; border-top: 1px solid rgba(45,40,38,.18); }.forecast-card-foot button { padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-transform: uppercase; letter-spacing: inherit; }.forecast-card-foot button:hover { color: var(--card-accent); }.forecast-caption { display: flex; align-items: start; gap: 13px; margin-top: 30px; color: var(--muted); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; line-height: 1.55; }.caption-line { width: 43px; height: 1px; margin-top: 6px; background: var(--accent); }
.forecast-card[data-weather="mist"] { --card-sky: #d6d5cb; --card-accent: #788d8d; }.forecast-card[data-weather="mist"] .scene-sun { transform: translateX(100px) scale(.55); opacity: .32; }.forecast-card[data-weather="mist"] .scene-cloud { transform: translateY(-15px) scale(1.2); opacity: .72; }.forecast-card[data-weather="mist"] .scene-wind { opacity: .65; }.forecast-card[data-weather="rain"] { --card-sky: #b4d1da; --card-accent: #4c7f8d; }.forecast-card[data-weather="rain"] .scene-sun { opacity: .15; transform: translate(-25px, 15px) scale(.75); }.forecast-card[data-weather="rain"] .scene-rain { opacity: 1; }.forecast-card[data-weather="wind"] { --card-sky: #e5e0c6; --card-accent: #b06e51; }.forecast-card[data-weather="wind"] .scene-sun { transform: translate(80px, -10px) scale(.7); opacity: .6; }.forecast-card[data-weather="wind"] .scene-cloud { transform: translateX(-85px) scale(.75); opacity: .5; }.forecast-card[data-weather="wind"] .scene-wind { opacity: 1; }
.weather-history { padding: 77px 0 100px; border-top: 1px solid var(--line); }.history-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 37px; }.history-heading .eyebrow { margin-bottom: 15px; }.history-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 65px); line-height: .9; letter-spacing: -.08em; }.clear-history { padding: 0 0 4px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); }.clear-history:hover { color: var(--accent); border-color: var(--accent); }.history-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }.history-empty { grid-column: 1 / -1; padding: 24px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }.history-item { min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border: 1px solid var(--line); background: rgba(255,255,255,.3); }.history-item-top { display: flex; justify-content: space-between; color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.history-item p { max-width: 250px; margin: 18px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 22px; line-height: 1.02; letter-spacing: -.04em; }.history-item button { align-self: flex-start; margin-top: 18px; padding: 0; border: 0; background: transparent; color: var(--accent); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.project-footer { display: flex; justify-content: space-between; padding: 25px 0; color: var(--muted); border-top: 1px solid var(--line); }.project-footer a { color: var(--ink); }.project-footer a:hover { color: var(--accent); }
@media (max-width: 900px) { .weather-hero { grid-template-columns: 1fr; gap: 65px; padding-top: 63px; }.hero-text { max-width: 550px; }.forecast-column { align-items: stretch; }.forecast-card { width: 100%; }.forecast-caption { align-self: center; } }
@media (max-width: 570px) { .weather-shell { padding: 0 20px; }.project-nav { height: 69px; }.project-id span, .nav-stamp { display: none; }.weather-hero { padding: 56px 0 74px; }.hero-text h1 { font-size: 80px; }.condition-picker { gap: 4px; }.condition { font-size: 8px; }.forecast-card { min-height: 500px; padding: 17px 17px 16px; }.scene-sun { left: 5%; transform: scale(.75); }.forecast-card[data-weather="mist"] .scene-sun { transform: translateX(75px) scale(.4); }.forecast-wording h2 { font-size: 38px; }.history-heading { display: block; }.clear-history { margin-top: 24px; }.history-list { grid-template-columns: 1fr; }.project-footer { flex-wrap: wrap; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition-duration: .01ms !important; } }
.live-weather-row { margin-top: 18px; }
.live-weather-button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 11px 13px; border: 1px dashed rgba(45,40,38,.35); background: rgba(255,255,255,.2); color: var(--ink); text-align: left; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .07em; transition: background .2s, border-color .2s, transform .2s; }
.live-weather-button:hover:not(:disabled) { border-color: var(--accent); background: rgba(255,255,255,.55); transform: translateY(-1px); }
.live-weather-button:disabled { cursor: wait; opacity: .6; }
.live-weather-button.is-live { border-style: solid; border-color: #7eaaa0; }
.live-weather-button.is-live .location-mark { color: #628d82; }
.location-mark { color: var(--accent); font-size: 16px; line-height: .7; }
.weather-status { min-height: 13px; margin: 7px 0 0; color: #aa9c93; font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }