:root{
  --ink:#1A1A2E; --ink-soft:#6B6B7B;
  --jacaranda:#6C5CE7; --jacaranda-tint:#EEEBFD;
  --coral:#FF5A5F; --coral-tint:#FFEBEC;
  --radius:14px;

  --light-bg:#F6EBCE; --light-border:#E4D3A0; --light-inset:#EFE1B8;
  --mid-bg:#D9C08A; --mid-border:#C7A968; --mid-ink:#211B12;

  --dark-bg:#211B12; --dark-border:#3A3020; --dark-text:#F3E9D2; --dark-soft:#B3A480; --dark-faint:#8A7A5C;
  --gold:#D9A441; --gold-tint:#3A2E17;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:linear-gradient(180deg, #F3DFAE 0%, #B99A5B 38%, #4A3C24 72%, #14120E 100%);color:var(--ink);font-family:'Poppins',sans-serif;padding:40px 48px}
.mono{font-family:'Poppins',monospace}
.disp{font-family:'Poppins',sans-serif}
header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px}
.word{display:flex;align-items:center;gap:10px}
.bloom{width:14px;height:14px;border-radius:50% 0 50% 50%;background:var(--jacaranda);transform:rotate(45deg)}
h1{font-family:'Poppins';font-weight:700;font-size:32px;margin:0;letter-spacing:-0.5px;color:var(--ink)}
.tag{color:#5A4A2E;font-size:14px;margin-top:4px}
.clock{text-align:right}
.clock .t{font-family:'Poppins';font-weight:700;font-size:44px;color:var(--jacaranda);line-height:1}
.clock .meta{font-size:12px;color:#6B5A3A;margin-top:6px}

.grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;grid-auto-rows:150px;gap:18px;grid-template-areas:
  "hero hero weather video"
  "hero hero news video"
  "traffic traffic news crime"
  "traffic traffic social crime"}

.card{border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(20,18,14,.28)}

/* tonal families, mapped to each card's position in the page gradient */
.light{background:var(--light-bg);border:1px solid var(--light-border);color:var(--ink)}
.light .label{color:var(--ink)}
.light .src{color:#9C8A5E}
.light .row{border-top:1px solid var(--light-border)}

.mid{background:var(--mid-bg);border:1px solid var(--mid-border);color:var(--mid-ink)}
.mid .label{color:var(--mid-ink)}
.mid .src{color:#5A4A2E}
.mid .row{border-top:1px solid var(--mid-border)}

.dark{background:var(--dark-bg);border:1px solid var(--dark-border);color:var(--dark-text)}
.dark .label{color:var(--dark-text)}
.dark .src{color:var(--dark-faint)}
.dark .row{border-top:1px solid rgba(243,233,210,.1)}
.dark .mapph{background:rgba(243,233,210,.05);border:1px dashed rgba(243,233,210,.18);color:var(--dark-soft)}

.label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:14px;text-transform:uppercase;letter-spacing:0.4px}
.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px}
.row:first-of-type{border-top:none!important}
.src{font-family:'Poppins';font-size:10px;white-space:nowrap;margin-left:12px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:11px;font-weight:600}
.dot{width:6px;height:6px;border-radius:50%}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;background:var(--jacaranda-tint);color:var(--jacaranda);font-size:12px;font-weight:600;text-decoration:none;width:fit-content;transition:background .15s ease,transform .15s ease}
.btn:hover{background:var(--jacaranda);color:#fff;transform:translateX(2px)}

#hero{grid-area:hero;background:linear-gradient(0deg, rgba(20,18,14,.6), rgba(20,18,14,0) 55%), var(--light-bg);position:relative;justify-content:flex-end;padding:0}
#hero:hover{border-color:var(--jacaranda)}
#hero .cap{position:absolute;left:20px;bottom:18px;right:20px;color:#fff}
#hero .cap .t{font-family:'Poppins';font-size:16px;font-weight:500}
#hero .cap .s{font-family:'Poppins';font-size:10px;opacity:.8;margin-top:2px}
#hero .ph{position:absolute;top:18px;left:20px;font-family:'Poppins';font-size:10px;color:var(--jacaranda);background:rgba(255,255,255,.85);padding:3px 8px;border-radius:99px}

#weather{grid-area:weather}
#weather:hover{border-color:var(--gold)}
.temp{font-family:'Poppins';font-weight:700;font-size:34px}

#video{grid-area:video}
#video:hover{border-color:var(--gold)}
.vph{flex:1;background:var(--light-inset);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;border:1px dashed var(--light-border)}

#news{grid-area:news}
#news:hover{border-color:var(--gold)}

#traffic{grid-area:traffic}
#traffic:hover{border-color:var(--gold)}
.mapph{flex:1;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:12px;gap:8px}

#crime{grid-area:crime}
#crime:hover{border-color:var(--coral)}

#social{grid-area:social}
#social:hover{border-color:var(--gold)}