:root {
  --paper: #f0ecdf;
  --ink: #17212c;
  --red: #e95136;
  --blue: #3775c8;
  --yellow: #f3bf36;
  --line: rgba(23, 33, 44, .28);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--paper); }
body { min-height: 100%; margin: 0; color: var(--ink); font-family: "DM Mono", monospace; overflow-x: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.paper { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .12; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }

header { height: 86px; border-bottom: 2px solid var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 34px; background: rgba(240,236,223,.82); backdrop-filter: blur(12px); position: relative; z-index: 10; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; font: 11px/1.05 "Archivo Black", sans-serif; letter-spacing: -.02em; }
.brand-mark { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 2px; }
.brand-mark i { display: block; width: 2px; height: 19px; background: var(--ink); transform: rotate(22deg); }
.brand-mark i:nth-child(2) { height: 27px; background: var(--red); }
.issue { border: 2px solid var(--ink); display: flex; height: 35px; align-items: center; font-size: 10px; }
.issue span { padding: 0 10px; }
.issue b { height: 100%; display: grid; place-items: center; background: var(--ink); color: var(--paper); padding: 0 10px; font-weight: 400; }
.status { justify-self: end; font-size: 9px; letter-spacing: .08em; }
.status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4c9d52; margin-right: 7px; animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(76,157,82,0); } 0%,100% { box-shadow: 0 0 0 0 rgba(76,157,82,.35); } }

main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.intro-panel { min-height: calc(100svh - 126px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(50px, 9vw, 130px); align-items: center; padding: 70px 0; transition: opacity .5s, transform .7s; }
.intro-panel.leaving { opacity: 0; transform: translateY(-20px); }
.kicker { font-size: 10px; letter-spacing: .14em; color: var(--blue); font-weight: 500; margin: 0 0 19px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font: clamp(58px, 7.6vw, 112px)/.78 "Archivo Black", sans-serif; text-transform: uppercase; letter-spacing: -.075em; margin: 0 0 38px; }
h1 em { font: italic clamp(70px, 9.2vw, 136px)/.8 "Newsreader", serif; text-transform: none; color: var(--red); letter-spacing: -.06em; margin-left: 12%; }
.dek { max-width: 560px; font: 18px/1.55 "Newsreader", serif; color: rgba(23,33,44,.72); }

.forecast-form { border: 2px solid var(--ink); background: rgba(240,236,223,.65); box-shadow: 12px 12px 0 var(--yellow); padding: 30px; }
.forecast-form label, fieldset legend { font-size: 9px; letter-spacing: .12em; font-weight: 500; }
.location-row { border-bottom: 2px solid var(--ink); display: flex; align-items: center; margin: 13px 0 29px; }
.location-row input { width: 100%; border: 0; outline: 0; background: transparent; font: italic 26px "Newsreader", serif; padding: 8px 0; }
.location-row span { color: var(--red); font-size: 23px; }
fieldset { border: 0; margin: 0; padding: 0; }
.condition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.condition { border: 1px solid var(--line); background: transparent; height: 58px; text-align: left; padding: 0 13px; font-size: 9px; letter-spacing: .08em; transition: .2s; }
.condition span { font: 22px "Newsreader", serif; margin-right: 8px; vertical-align: middle; }
.condition:hover, .condition.selected { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.forecast-button { margin-top: 24px; width: 100%; height: 63px; border: 2px solid var(--ink); background: var(--red); color: white; display: flex; justify-content: space-between; align-items: center; padding: 0 8px 0 20px; font: 11px "Archivo Black", sans-serif; letter-spacing: .06em; }
.forecast-button i { width: 45px; height: 45px; border: 1px solid white; border-radius: 50%; display: grid; place-items: center; font: 22px "DM Mono", monospace; transition: transform .25s; }
.forecast-button:hover i { transform: translateX(4px); }

.forecast { display: none; padding: 70px 0 100px; }
.forecast.visible { display: block; animation: reveal .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(22px); } }
.forecast-heading { border-bottom: 2px solid var(--ink); display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: 22px; margin-bottom: 18px; }
.forecast-heading .kicker { grid-column: 1 / -1; margin-bottom: 9px; }
.forecast-heading h2 { font: clamp(40px, 6vw, 82px)/.9 "Archivo Black", sans-serif; letter-spacing: -.06em; text-transform: uppercase; margin-bottom: 0; max-width: 850px; }
.forecast-heading > p:last-child { margin: 0; font-size: 9px; text-align: right; line-height: 1.6; }
.forecast-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.now-card { background: var(--blue); color: #fff; min-height: 620px; padding: 25px 30px 31px; position: relative; overflow: hidden; border: 2px solid var(--ink); }
.now-top { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .12em; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 13px; position: relative; z-index: 2; }
.weather-symbol { height: 255px; position: relative; margin-top: 15px; }
.sun { position: absolute; width: 155px; height: 155px; border: 3px solid white; border-radius: 50%; left: 49%; top: 26px; animation: float 5s ease-in-out infinite; }
.sun::before, .sun::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }
.sun::after { inset: 38px; }
.cloud { position: absolute; width: 260px; height: 80px; border-radius: 60px; background: var(--paper); left: 9%; bottom: 22px; animation: drift 8s ease-in-out infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 105px; height: 105px; left: 35px; top: -48px; }
.cloud::after { width: 135px; height: 135px; right: 29px; top: -74px; }
.rays { position: absolute; inset: 30px 16%; border: 2px dashed rgba(255,255,255,.3); border-radius: 50%; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(36px); } }
@keyframes float { 50% { transform: translateY(-7px); } }
.degree { position: absolute; left: 28px; bottom: 92px; font: 170px/.65 "Archivo Black", sans-serif; letter-spacing: -.12em; }
.degree sup { font-size: 50px; vertical-align: top; margin-left: 12px; }
.now-card h3 { position: absolute; left: 31px; bottom: 24px; font: 28px "Archivo Black", sans-serif; letter-spacing: -.045em; margin: 0; max-width: 80%; }
.now-card > p { position: absolute; right: 27px; bottom: 95px; width: 39%; font: 15px/1.45 "Newsreader", serif; }
.details-column { display: grid; grid-template-rows: 1fr auto; gap: 18px; }
.advisory-card { border: 2px solid var(--ink); background: var(--yellow); padding: 26px; min-height: 340px; position: relative; }
.card-label { font-size: 9px; letter-spacing: .12em; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
blockquote { margin: 34px 0 0; font: italic clamp(27px, 3vw, 43px)/1.02 "Newsreader", serif; max-width: 410px; }
.stamp { position: absolute; right: 20px; bottom: 18px; width: 74px; height: 74px; border: 3px double var(--red); color: var(--red); border-radius: 50%; display: grid; place-items: center; text-align: center; transform: rotate(-11deg); font: 10px/1.05 "Archivo Black", sans-serif; }
.metrics-card { border: 2px solid var(--ink); background: rgba(240,236,223,.72); padding: 9px 24px; }
.metric { display: grid; grid-template-columns: 1fr auto; padding: 15px 0; border-bottom: 1px solid var(--line); }
.metric:last-child { border: 0; }
.metric span { font-size: 8px; line-height: 1.35; letter-spacing: .09em; }
.metric strong { font: 18px "Archivo Black", sans-serif; }
.metric i { grid-column: 1/-1; display: block; height: 4px; background: rgba(23,33,44,.12); margin-top: 9px; overflow: hidden; }
.metric i b { display: block; height: 100%; width: 50%; background: var(--red); transition: width 1.1s .3s cubic-bezier(.22,1,.36,1); }
.outlook { border: 2px solid var(--ink); margin-top: 18px; background: rgba(240,236,223,.7); }
.outlook-title { padding: 13px 18px; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .11em; }
.outlook-title small { font-size: 7px; color: rgba(23,33,44,.6); }
.hourly { display: grid; grid-template-columns: repeat(3, 1fr); }
.hour { min-height: 135px; padding: 17px; border-right: 1px solid var(--ink); display: grid; grid-template-columns: 1fr auto; align-content: space-between; }
.hour:last-child { border: 0; }
.hour time, .hour small { font-size: 8px; letter-spacing: .08em; }
.hour b { grid-column: 1; font: 20px/1.05 "Newsreader", serif; max-width: 190px; }
.hour .hour-symbol { grid-row: 1/3; grid-column: 2; font: 40px "Newsreader", serif; color: var(--blue); }
.forecast-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.forecast-actions button { border: 1px solid var(--ink); background: transparent; padding: 13px 18px; font-size: 8px; letter-spacing: .1em; }
.forecast-actions button:hover { background: var(--ink); color: var(--paper); }
.forecast-actions span { font-size: 15px; vertical-align: middle; margin-right: 5px; }

footer { min-height: 40px; border-top: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: center; padding: 0 34px; font-size: 7px; letter-spacing: .1em; background: var(--paper); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translate(-50%, 25px); background: var(--ink); color: var(--paper); padding: 13px 18px; font-size: 9px; opacity: 0; pointer-events: none; transition: .3s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

body[data-condition="restless"] { --blue: #8f47b8; --yellow: #f3a83b; }
body[data-condition="hopeful"] { --blue: #26866f; --yellow: #f5c83c; }
body[data-condition="strange"] { --blue: #c34464; --yellow: #b8d65a; }

@media (max-width: 760px) {
  header { height: 72px; padding: 0 17px; grid-template-columns: 1fr auto; }
  .issue { display: none; }
  .status { font-size: 0; }
  .status i { margin: 0; }
  main { width: calc(100% - 32px); }
  .intro-panel { min-height: calc(100svh - 105px); grid-template-columns: 1fr; gap: 35px; padding: 48px 0 65px; }
  h1 { font-size: clamp(55px, 19vw, 82px); }
  h1 em { font-size: clamp(72px, 23vw, 100px); }
  .dek { font-size: 16px; }
  .forecast-form { padding: 22px; box-shadow: 7px 7px 0 var(--yellow); }
  .forecast { padding-top: 45px; }
  .forecast-heading { grid-template-columns: 1fr; }
  .forecast-heading > p:last-child { text-align: left; margin-top: 13px; }
  .forecast-grid { grid-template-columns: 1fr; }
  .now-card { min-height: 560px; padding-left: 21px; }
  .degree { font-size: 130px; left: 20px; }
  .now-card h3 { left: 21px; font-size: 23px; }
  .now-card > p { width: 43%; font-size: 14px; }
  .weather-symbol { height: 220px; }
  .cloud { width: 220px; }
  .hourly { grid-template-columns: 1fr; }
  .hour { border-right: 0; border-bottom: 1px solid var(--ink); min-height: 105px; }
  .outlook-title small { display: none; }
  footer { padding: 0 17px; }
  footer span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }