
/* kula-sunset-hero-v1 */
.current{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:-18px -28px 0;
  padding:38px 28px 44px;
  border-bottom:1px solid rgba(255,240,215,.18);
  border-radius:0 0 22px 22px;
}
.current::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url("/hero.jpeg") center 58%/cover no-repeat;
  filter:saturate(.88) brightness(.72);
  transform:scale(1.015);
}
.current::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(4,20,22,.95) 0%,rgba(4,20,22,.78) 46%,rgba(4,20,22,.40) 76%,rgba(4,20,22,.27) 100%),
    linear-gradient(180deg,rgba(4,18,20,.12),rgba(4,18,20,.55));
}
.current .location-line,
.current .condition,
.current .feels,
.current .metrics span,
.current .metrics small,
.current .today-strip span,
.current .today-strip small{color:rgba(255,247,236,.78)}
.current .temperature-panel{text-shadow:0 2px 22px rgba(0,0,0,.38)}
.current .metrics{gap:12px}
.current .metrics article{
  padding:15px 16px;
  border:1px solid rgba(255,240,215,.18);
  border-radius:12px;
  background:rgba(5,25,27,.67);
  box-shadow:0 12px 28px rgba(0,0,0,.13);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.current .today-strip{
  background:rgba(5,25,27,.73);
  border-color:rgba(255,240,215,.18);
  box-shadow:0 12px 28px rgba(0,0,0,.13);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.current .today-strip div+div{border-color:rgba(255,240,215,.16)}

@media(max-width:900px){
  .current{margin:-18px -18px 0;padding:34px 18px 40px}
  .current::before{background-position:64% center}
  .current::after{background:linear-gradient(180deg,rgba(4,20,22,.83) 0%,rgba(4,20,22,.64) 52%,rgba(4,20,22,.84) 100%)}
}
@media(max-width:620px){
  .current{margin:-10px -16px 0;padding:26px 16px 30px;border-radius:0 0 18px 18px}
  .current::before{background-position:67% center;filter:saturate(.84) brightness(.68)}
  .current .metrics article{padding:13px 12px}
}

/* kula-sunset-hero-v2 */
.current{
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:34px 28px 36px;
}
.current::before{
  background-position:center center;
  filter:saturate(.98) brightness(.92);
}
.current::after{
  background:linear-gradient(180deg,rgba(4,18,20,.02) 0%,rgba(4,18,20,.04) 38%,rgba(4,18,20,.58) 62%,rgba(4,18,20,.94) 100%);
}
.current .location-line{
  position:absolute;
  z-index:1;
  top:22px;
  left:28px;
  margin:0;
  padding:10px 14px;
  border:1px solid rgba(255,240,215,.2);
  border-radius:999px;
  background:rgba(4,20,22,.46);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.current .temperature-panel{
  padding:16px 18px;
  border:1px solid rgba(255,240,215,.18);
  border-radius:14px;
  background:rgba(5,25,27,.58);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.current .today-strip{margin-top:14px}
@media(max-width:900px){
  .current{min-height:740px;padding:280px 18px 34px;justify-content:flex-end}
  .current::before{background-position:center top}
  .current::after{background:linear-gradient(180deg,rgba(4,18,20,.01) 0%,rgba(4,18,20,.05) 32%,rgba(4,18,20,.78) 56%,rgba(4,18,20,.96) 100%)}
  .current .location-line{top:18px;left:18px;right:18px;width:max-content;max-width:calc(100% - 36px)}
}
@media(max-width:620px){
  .current{min-height:860px;padding:270px 16px 28px}
  .current::before{background-position:center top;filter:saturate(.94) brightness(.88)}
  .current .location-line{top:14px;left:14px;right:14px;max-width:calc(100% - 28px)}
  .current .temperature-panel{padding:14px}
}

.area-weather{margin:34px 0 48px;padding:28px;border-top:3px solid #79b4c9;border-radius:0 0 16px 16px;background:linear-gradient(140deg,rgba(19,42,52,.97),rgba(12,29,38,.97));box-shadow:0 14px 36px rgba(0,0,0,.15)}
.area-heading{max-width:850px;margin-bottom:22px}.area-heading .eyebrow{color:#9fc9d8;margin:0 0 7px}.area-heading h2{font:500 30px/1.15 Georgia,serif;color:#edf5f7;margin:0 0 12px}.area-heading>p:last-child{color:#b2c6cd;font-size:14px;line-height:1.6;margin:0}
.area-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.area-card{min-width:0;background:rgba(4,18,27,.55);border:1px solid #36525e;border-radius:12px;padding:23px}.area-card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.area-card-heading h3{font:500 24px/1.25 Georgia,serif;color:#f0f6f7;margin:7px 0 0}.area-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9fc9d8}.area-status{font-size:11px;color:#b4d5dd;border:1px solid #476673;border-radius:20px;padding:5px 9px;white-space:nowrap}.area-status[data-stale="true"]{border-color:#c69b65;color:#f0c387}.area-source,.area-time{font-size:12px;line-height:1.6;color:#a9c1cb;margin:10px 0 0}.area-time{min-height:20px;color:#d1e0e5}.area-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:22px 0;padding:20px 0;border-block:1px solid #2c4652}.area-values>div:last-child{grid-column:1/-1}.area-values dt{color:#b2c6cd;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.area-values dd{margin:6px 0 0;font:500 25px/1.25 Georgia,serif;color:#f4f8f8}.area-values dd small{font:400 12px/1.5 system-ui,sans-serif;color:#b2c6cd;display:block;margin-top:5px}.area-footnote{font-size:12px;color:#a9c1cb;line-height:1.6}.area-card>a{display:inline-block;margin-top:8px;font-size:12px;color:#a7d5e5;text-decoration:underline;text-underline-offset:3px}.area-raw{margin:12px 0;color:#b2c6cd;font-size:12px}.area-raw summary{cursor:pointer}.area-raw code{display:block;overflow-wrap:anywhere;white-space:pre-wrap;margin-top:10px;line-height:1.6}
@media(max-width:760px){.area-grid{grid-template-columns:1fr}.area-weather{padding:21px 16px;margin-top:26px}.area-card{padding:19px}.area-card-heading h3{font-size:23px}}

.storm-rain-card{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px 24px;margin-top:16px;padding:15px 18px;border:1px solid rgba(255,240,215,.2);border-radius:11px;background:rgba(5,25,27,.76);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.storm-rain-card>span{color:rgba(255,247,236,.78);font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.08em}
.storm-rain-card strong{font-family:Georgia,serif;font-size:25px;font-weight:500;white-space:nowrap}
.storm-rain-card small{color:rgba(255,247,236,.78);line-height:1.5;text-align:right}
@media(max-width:620px){.storm-rain-card{grid-template-columns:1fr auto;gap:8px 14px}.storm-rain-card small{grid-column:1/-1;text-align:left}}

.current .kula-clock{position:absolute;z-index:1;top:22px;right:28px;margin:0;padding:10px 14px;border:1px solid rgba(255,240,215,.2);border-radius:999px;background:rgba(4,20,22,.46);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f3f7f4;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.45);font-variant-numeric:tabular-nums;white-space:nowrap}
.current .location-line{max-width:calc(100% - 205px)}
@media(max-width:900px){.current .kula-clock{top:18px;right:18px}.current .location-line{max-width:calc(100% - 195px)}}
@media(max-width:620px){.current .kula-clock{top:66px;left:14px;right:auto;padding:7px 11px;font-size:12px}.current .location-line{max-width:calc(100% - 28px)}}

.current .nws-alerts{position:relative;z-index:2;flex:none;align-self:flex-start;width:min(560px,100%);display:grid;gap:8px;margin-bottom:auto}
.current{padding-top:80px}
.nws-alerts[hidden]{display:none}
.nws-alert{display:flex;align-items:center;gap:10px;width:100%;min-height:43px;padding:9px 12px;border:1px solid var(--nws-color);border-left-width:5px;border-radius:10px;background:rgba(5,22,24,.87);color:#f3f7f4;text-align:left;font:inherit;font-size:14px;line-height:1.3;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.16)}
.nws-alert:hover,.nws-alert:focus-visible{background:rgba(21,43,44,.95);outline-offset:2px}
.nws-alert .nws-event{font-weight:750}
.nws-alert .nws-until{margin-left:auto;color:#d8e2df;font-size:13px;white-space:nowrap}
.nws-alert .nws-arrow{color:var(--nws-color);font-size:18px;line-height:1}
.nws-alerts .nws-empty{margin:0;width:max-content;max-width:100%;padding:8px 11px;border:1px solid rgba(205,230,221,.24);border-radius:9px;background:rgba(5,22,24,.75);color:#e2e9e6;font-size:13px}
.nws-alerts a.nws-empty{text-decoration:underline}
.nws-detail{width:min(640px,calc(100% - 24px));max-height:min(82vh,760px);overflow:auto;margin:auto;padding:0;border:1px solid rgba(205,230,221,.3);border-radius:16px;background:#102527;color:#f3f7f4;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.nws-detail::backdrop{background:rgba(2,13,15,.76)}
.nws-detail-inner{padding:27px 29px}.nws-detail h2{margin:8px 32px 10px 0;font:500 29px/1.2 Georgia,serif}.nws-detail .nws-issuer{color:#b1c7bf;font-size:14px;line-height:1.5}.nws-detail .nws-body{white-space:pre-wrap;overflow-wrap:anywhere;color:#e1ebe6;font-size:15px;line-height:1.6}.nws-detail .nws-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}.nws-detail a{color:#b8e8d3}.nws-detail button{border:1px solid rgba(205,230,221,.35);border-radius:8px;background:transparent;color:#f3f7f4;padding:8px 14px;font:inherit;cursor:pointer}
@media(max-width:900px){.current{padding-top:72px}}
@media(max-width:620px){
  .current{padding-top:14px}
  .current .location-line{position:relative;top:auto;left:auto;right:auto;width:100%;max-width:100%;box-sizing:border-box}
  .current .kula-clock{position:relative;top:auto;left:auto;right:auto;align-self:flex-start;margin-top:10px}
  .current .nws-alerts{margin-top:14px}
  .nws-alert{flex-wrap:wrap;min-height:40px;padding:8px 10px;font-size:13px}
  .nws-alert .nws-until{font-size:12px}
}

.sky-tonight{margin:54px 0 0}
.sky-tonight .section-heading{margin:0 0 19px}
.sky-tonight .sky-intro{margin:7px 0 0;color:#9bb0aa;font-size:14px;line-height:1.5}
.sky-tonight .sky-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sky-card{min-width:0;border:1px solid rgba(205,230,221,.16);border-radius:15px;background:linear-gradient(145deg,#102a2d,#091d20);padding:21px 22px 19px}
.sky-card .sky-kind{display:block;color:#f0c387;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sky-card h3{margin:9px 0 12px;color:#f3f7f4;font:500 25px/1.18 Georgia,serif}
.sky-card .sky-when{display:block;color:#f3f7f4;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.sky-card .sky-meta{margin:11px 0 0;color:#a8bbb5;font-size:13px;line-height:1.55}
.sky-card .sky-gear{display:inline-block;margin-top:17px;padding:6px 10px;border-radius:999px;background:rgba(112,224,180,.11);color:#b8e8d3;font-size:12px}
.sky-tonight .sky-note{margin:15px 0 0;color:#9bb0aa;font-size:13px;line-height:1.5}
@media(max-width:780px){.sky-tonight .sky-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.sky-tonight{margin-top:40px}.sky-tonight .sky-grid{grid-template-columns:1fr}.sky-card{padding:19px 20px}.sky-card h3{font-size:23px}}

/* kula-moon-card-v1 */
.current .today-strip{grid-template-columns:repeat(5,1fr)}
.current .today-strip .moon-box b{font-size:16px;line-height:1.2;min-height:38px;display:flex;align-items:center}
.current .today-strip .moon-box small{line-height:1.45}
@media(max-width:620px){
  .current{min-height:940px}
  .current .today-strip{grid-template-columns:repeat(2,1fr)}
  .current .today-strip div:nth-child(odd){border-left:0}
  .current .today-strip div:nth-child(n+3){border-top:1px solid rgba(255,240,215,.16);padding-top:14px;margin-top:14px}
  .current .today-strip .moon-box{grid-column:1/-1}
  .current .today-strip .moon-box b{min-height:auto}
}

/* kula-eclipse-card-v1 */
.current .today-strip{grid-template-columns:repeat(6,1fr)}
.current .today-strip .eclipse-box b{font-size:16px;line-height:1.2;min-height:38px;display:flex;align-items:center}
.current .today-strip .eclipse-box small{line-height:1.45}
@media(max-width:620px){
  .current{min-height:1030px}
  .current .today-strip{grid-template-columns:repeat(2,1fr)}
  .current .today-strip .moon-box,.current .today-strip .eclipse-box{grid-column:1/-1}
  .current .today-strip .eclipse-box b{min-height:auto}
}

/* kula-daily-cards-v2 */
.current .today-strip{gap:10px;padding:0;border:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.current .today-strip>div{min-width:0;padding:15px 14px;border:1px solid rgba(255,240,215,.2);border-radius:11px;background:rgba(5,25,27,.76);box-shadow:0 10px 24px rgba(0,0,0,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.current .today-strip>div+div{border-left:1px solid rgba(255,240,215,.2)}
@media(max-width:620px){.current .today-strip>div:nth-child(n+3){margin-top:0;padding-top:15px}.current .today-strip .moon-box,.current .today-strip .eclipse-box{grid-column:1/-1}}

/* kula-camera-coming-soon-v1 */
.camera-card{cursor:default}
.camera-card .camera-coming{color:#ffd092;background:rgba(5,25,27,.82);border:1px solid rgba(239,184,109,.45);border-radius:999px;padding:7px 11px;letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.camera-section .cameras-coming{color:var(--gold);cursor:default;pointer-events:none}
.timelapse-card{cursor:default}
.timelapse-card .play{opacity:.58}
.timelapse-card button.timelapse-coming{border-color:rgba(239,184,109,.5);border-radius:999px;background:rgba(239,184,109,.12);color:#ffd092;cursor:default;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* kula-satellite-radar-v1 */
.maps-section{padding:58px 0 10px}
.map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.map-card{min-width:0;overflow:hidden;border:1px solid rgba(255,240,215,.16);border-radius:16px;background:rgba(5,25,27,.88);box-shadow:0 18px 45px rgba(0,0,0,.18)}
.map-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px 16px}
.map-card-head span{display:block;margin-bottom:4px;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.map-card-head h3{margin:0;color:#fff7e9;font-family:Georgia,serif;font-size:22px;font-weight:500}
.map-card-head a{flex:0 0 auto;color:#f0c387;font-size:12px;text-decoration:none}
.map-card-head a:hover{text-decoration:underline}
.map-frame{height:400px;background:#071719}
.map-frame img{display:block;width:100%;height:100%;object-fit:contain;background:#02090a}
.map-source{margin:0;padding:13px 20px 15px;color:rgba(255,247,233,.65);font-size:12px}
.map-source a{color:#f0c387;text-decoration:none}
.map-source a:hover{text-decoration:underline}
@media(max-width:900px){.map-grid{grid-template-columns:1fr}.map-frame{height:390px}}
@media(max-width:620px){.maps-section{padding-top:44px}.map-card-head{display:block}.map-card-head a{display:inline-block;margin-top:10px}.map-frame{height:330px}}

/* kula-contact-forms-v1 */
footer .contact-links{display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;width:100%;margin-top:8px}
footer .contact-link{appearance:none;border:0;background:none;padding:2px;color:#f0c387;font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(240,195,135,.35);text-underline-offset:4px}
footer .contact-link:hover,footer .contact-link:focus-visible{color:#fff4df;text-decoration-color:currentColor}
.contact-modal[hidden]{display:none}
.contact-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(1,10,11,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.contact-dialog{position:relative;width:min(600px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;border:1px solid rgba(240,195,135,.3);border-radius:18px;background:#092326;color:#fff7e9;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.contact-dialog-inner{padding:30px}
.contact-close{position:absolute;top:13px;right:14px;width:38px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.05);color:#fff7e9;font-size:24px;line-height:1;cursor:pointer}
.contact-close:hover,.contact-close:focus-visible{border-color:#f0c387;color:#f0c387}
.contact-kicker{margin:0 46px 6px 0;color:#f0c387;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.contact-title{margin:0 46px 8px 0;font-family:Georgia,serif;font-size:30px;font-weight:500;line-height:1.15}
.contact-intro{margin:0 0 22px;color:rgba(255,247,233,.7);font-size:15px;line-height:1.5}
.contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-field{display:grid;gap:7px;min-width:0}
.contact-field.full{grid-column:1/-1}
.contact-field label{font-size:14px;font-weight:650;color:#fff7e9}
.contact-field label small{color:rgba(255,247,233,.55);font-weight:400}
.contact-field input,.contact-field select,.contact-field textarea{box-sizing:border-box;width:100%;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(2,15,16,.72);padding:11px 12px;color:#fff7e9;font:inherit;font-size:16px;outline:none}
.contact-field textarea{min-height:128px;resize:vertical;line-height:1.45}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{border-color:#f0c387;box-shadow:0 0 0 3px rgba(240,195,135,.12)}
.contact-field select{color-scheme:dark}
.contact-actions{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-top:2px}
.contact-submit{border:1px solid #f0c387;border-radius:999px;background:#f0c387;padding:11px 21px;color:#092326;font:inherit;font-size:14px;font-weight:750;cursor:pointer}
.contact-submit:hover{background:#ffd69e}.contact-submit:disabled{cursor:wait;opacity:.65}
.contact-note{margin:0;color:rgba(255,247,233,.55);font-size:12px;line-height:1.4}
.contact-status{grid-column:1/-1;margin:0;min-height:20px;color:#ffd69e;font-size:14px}
.contact-success{padding:22px 0 8px}.contact-success h3{margin:0 0 8px;font-family:Georgia,serif;font-size:26px;font-weight:500}.contact-success p{margin:0;color:rgba(255,247,233,.72);line-height:1.5}
.contact-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:620px){.contact-modal{padding:10px}.contact-dialog{max-height:calc(100vh - 20px);border-radius:14px}.contact-dialog-inner{padding:26px 20px 22px}.contact-title{font-size:26px}.contact-form{grid-template-columns:1fr}.contact-field.full,.contact-actions,.contact-status{grid-column:1}.contact-actions{align-items:flex-start;flex-direction:column}.contact-submit{width:100%}}
