:root { --ink:#102c3c; --navy:#07354b; --blue:#087aa5; --cyan:#57c7d8; --cream:#f5f2e9; --paper:#fffdf8; --line:#d9e1df; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter,"Avenir Next",Arial,sans-serif; }
main { max-width:1480px; margin:auto; padding:0 36px; }
.masthead { height:112px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:15px; }
.brand-mark { width:55px; height:55px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--navy); border:4px solid var(--cyan); font:800 18px Manrope,Arial; letter-spacing:-1px; }
.brand strong { display:block; font:800 20px Manrope,Arial; text-transform:uppercase; letter-spacing:.04em; }
.brand small { display:block; margin-top:2px; color:#5e747e; font-size:13px; letter-spacing:.03em; }
.status { display:flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid #cfd9d6; border-radius:99px; color:#677b83; background:#fff8; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.status i { width:8px; height:8px; border-radius:50%; background:#b5bdbd; }
.status.is-live i { background:#3ab978; box-shadow:0 0 0 4px #3ab97822; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(330px,.7fr); gap:18px; }
.camera-panel,.wind-panel { border-radius:20px; overflow:hidden; }
.camera-panel { background:var(--navy); color:white; padding:18px; }
.section-label { min-height:24px; display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.11em; }
.section-label span:last-child { opacity:.62; font-size:10px; }
.camera-frame { position:relative; min-height:440px; height:min(54vw,620px); border-radius:12px; overflow:hidden; background:linear-gradient(145deg,#174e64,#0b2937); }
.camera-frame img { position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block; color:transparent; }
.camera-fallback { position:absolute; inset:0; display:grid; place-content:center; gap:5px; text-align:center; color:#b9d3dc; }
.camera-fallback strong { font:700 25px Manrope,Arial; color:white; }
.wind-panel { padding:22px 26px 20px; color:white; background:var(--blue); }
.wind-main { display:grid; grid-template-columns:1fr 130px; align-items:center; gap:12px; padding:40px 0 32px; }
.big-number { font:800 clamp(70px,7vw,108px)/.85 Manrope,Arial; letter-spacing:-.08em; }
.unit { margin-left:12px; font:700 22px Manrope,Arial; }
.wind-main p,.wind-note { margin:16px 0 0; opacity:.72; font-size:13px; }
.direction { aspect-ratio:1; border:1px solid #ffffff55; border-radius:50%; display:grid; place-content:center; text-align:center; position:relative; background:#ffffff0c; }
.direction:before,.direction:after { content:""; position:absolute; background:#ffffff22; }
.direction:before { width:1px; height:100%; left:50%; }.direction:after { height:1px; width:100%; top:50%; }
.direction .arrow { position:absolute; z-index:1; left:50%; top:8px; transform:translateX(-50%) rotate(var(--wind-angle)); transform-origin:50% 57px; font-size:31px; color:var(--cyan); }
.direction strong,.direction small { position:relative; z-index:2; }.direction strong { font:800 27px Manrope,Arial; }.direction small { font-weight:600; opacity:.7; }
.gust { border-top:1px solid #ffffff33; border-bottom:1px solid #ffffff33; display:flex; justify-content:space-between; align-items:center; padding:20px 0; text-transform:uppercase; font-weight:700; letter-spacing:.07em; }
.gust strong { font:800 42px Manrope,Arial; letter-spacing:-.05em; }.gust small { font-size:15px; letter-spacing:0; }.wind-note { margin-top:16px; }
.conditions { display:grid; grid-template-columns:1.25fr repeat(5,1fr); gap:10px; margin-top:18px; }
.conditions article { min-height:165px; padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:15px; display:flex; flex-direction:column; justify-content:space-between; }
.conditions article.featured { background:#e2f4f5; border-color:#b7dcdf; }
.card-kicker { color:#687d85; text-transform:uppercase; letter-spacing:.09em; font-size:11px; font-weight:700; }
.conditions strong { font:800 clamp(30px,3vw,45px) Manrope,Arial; letter-spacing:-.055em; white-space:nowrap; }.conditions strong small,.temperature-card div span { margin-left:5px; font:700 14px Manrope,Arial; letter-spacing:0; }
.conditions p { margin:0; color:#6b7c82; font-size:12px; }.temperature-card div strong { font:800 clamp(46px,4.5vw,68px) Manrope,Arial; }
.day-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:18px 0; overflow:hidden; background:var(--line); border:1px solid var(--line); border-radius:14px; }
.day-strip div { background:var(--paper); padding:17px 20px; display:flex; justify-content:space-between; align-items:center; gap:15px; }.day-strip span { color:#718187; font-size:12px; text-transform:uppercase; letter-spacing:.07em; }.day-strip strong { font:700 14px Manrope,Arial; text-align:right; }
footer { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:18px 4px 35px; color:#6a7b80; font-size:12px; } footer p { margin:0; max-width:750px; } footer a { color:var(--blue); font-weight:700; text-decoration:none; white-space:nowrap; }
@media (max-width:1100px) { .conditions { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { main { padding:0 16px; }.masthead { height:92px; }.brand strong { font-size:15px; }.brand small { font-size:11px; }.brand-mark { width:45px;height:45px; }.status { padding:8px 10px; font-size:10px; }.hero-grid { grid-template-columns:1fr; }.wind-main { padding:20px 0; }.conditions { grid-template-columns:repeat(2,1fr); }.day-strip { grid-template-columns:1fr 1fr; }.day-strip div { min-height:70px; flex-direction:column; align-items:flex-start; }.day-strip strong { text-align:left; } footer { align-items:flex-start; flex-direction:column; gap:12px; } }
@media (max-width:440px) { .brand small { display:none; }.status { border:0; background:transparent; padding:0; }.status i { width:7px;height:7px; }.camera-panel { padding:12px; }.wind-panel { padding:18px; }.wind-main { grid-template-columns:1fr 110px; }.big-number { font-size:72px; }.conditions article { min-height:145px; padding:17px; }.conditions strong { font-size:30px; }.day-strip { grid-template-columns:1fr; } }
.camera-frame { width:100%; aspect-ratio:16 / 9; height:auto; min-height:0; }
.hero-grid { grid-template-columns:1fr; }
.camera-frame { width:100%; aspect-ratio:21 / 9; height:auto; min-height:0; }
@media (max-width:760px) { .camera-frame { aspect-ratio:16 / 9; } }