.today-location-splash {
  display: grid;
  grid-template-columns: minmax(13rem, .8fr) minmax(18rem, 1.35fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto 2rem;
  padding: clamp(1.25rem, 4vw, 3rem);
  color: #f7ead4;
  background: radial-gradient(circle at 75% 30%, rgba(177, 91, 43, .2), transparent 38%), #171518;
  border: 1px solid rgba(220, 137, 72, .36);
  border-radius: .35rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .24);
}

.today-location-splash__eyebrow {
  margin: 0 0 .6rem;
  color: #e39a57;
  font: 600 .72rem/1.2 system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.today-location-splash h1,
.today-location-splash h2 {
  margin: 0 0 .75rem;
  color: #ffd29d;
  font: 400 clamp(1.8rem, 5vw, 3rem)/1.02 Georgia, "Times New Roman", serif;
}

.today-location-splash__copy > p:last-child {
  max-width: 28rem;
  margin: 0;
  color: #d8c7b1;
  font: 400 1rem/1.55 Georgia, "Times New Roman", serif;
}

/* Controls, map and coordinate field share the wide column beside the copy;
   the one-column phone grid stacks them under it. */
.today-location-splash > .today-location-form-region {
  grid-column: 2;
  min-width: 0;
}

.today-location-splash > .today-location-form-region form {
  display: block;
  max-width: 42rem;
}

.today-location-splash .today-location-form-title {
  margin: 0 0 .75rem;
  color: #f2d7b4;
  font: 600 .78rem/1.2 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.today-location-splash .today-location-auto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
  justify-items: start;
}

.today-location-splash .today-location-auto > * { grid-column: 1 / -1; }

.today-location-splash .today-location-auto > [hidden] { display: none; }

.today-location-splash .today-location-privacy,
.today-location-splash .today-location-map-hint,
.today-location-splash .today-location-status {
  margin: 0;
  color: #d8c7b1;
  font: 400 .9rem/1.45 system-ui, sans-serif;
}

.today-location-splash .today-location-status:empty { display: none; }
.today-location-splash .today-location-status { color: #ffe0b8; }

.today-location-splash .today-location-error,
.today-location-splash .today-location-notice {
  margin: 1rem 0 0;
  padding: .6rem .75rem;
  color: #fff0d8;
  font: 500 .95rem/1.45 system-ui, sans-serif;
  background: rgba(120, 50, 30, .35);
  border-left: 3px solid #f0a15a;
}

.today-location-splash .today-location-notice { background: rgba(60, 70, 90, .45); }

.today-location-splash .today-location-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
  margin-top: 1rem;
}

.today-location-splash .today-location-fields > .today-location-hint {
  grid-column: 1 / -1;
}

.today-location-splash .today-location-fields > .today-location-hint {
  margin: 0;
  color: #d8c7b1;
  font: 400 .85rem/1.4 system-ui, sans-serif;
  opacity: 1;
}

.today-location-splash .today-location-optional {
  color: #bfae98;
  font-weight: 400;
  letter-spacing: 0;
}

.today-location-splash .today-location-reset {
  display: inline-block;
  min-height: 2.75rem;
  margin-top: .75rem;
  padding: .7rem 0;
  color: #f0a15a;
}

.today-location-splash .today-location-form-region label {
  margin-bottom: .3rem;
  color: #f2d7b4;
  font: 600 .78rem/1.2 system-ui, sans-serif;
  letter-spacing: .04em;
}

.today-location-splash .today-location-form-region input {
  min-height: 2.75rem;
  padding: .55rem .7rem;
  color: #fff4e4;
  font: 500 1rem/1.2 system-ui, sans-serif;
  background: #20232a;
  border: 1px solid #8c6b4c;
  border-radius: .2rem;
}

.today-location-splash .today-location-form-region input:focus-visible,
.today-location-splash .today-location-form-region button:focus-visible,
.today-location-splash .today-location-form-region a:focus-visible {
  outline: 3px solid #f6b66e;
  outline-offset: 2px;
}

.today-location-splash .today-location-form-region button {
  min-height: 2.75rem;
  max-width: 100%;
  padding: .6rem 1rem;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  color: #24160e;
  font: 700 .95rem/1.2 system-ui, sans-serif;
  background: #f0a15a;
  border: 1px solid #ffd39f;
  border-radius: .2rem;
  cursor: pointer;
}

.today-location-splash .today-location-form-region button:hover {
  background: #ffc07d;
}

.today-location-splash .today-location-form-region button:disabled {
  cursor: progress;
  opacity: .75;
}

.today-location-splash .today-location-form-region .today-location-locate {
  min-height: 3rem;
  padding-inline: 1.4rem;
  font-size: 1.05rem;
}

.today-location-splash .today-location-form-region .today-location-submit {
  justify-self: start;
  color: #ffe0b8;
  background: transparent;
  border-color: #c98a55;
}

.today-location-splash .today-location-form-region .today-location-submit:hover {
  color: #24160e;
}

.today-location-map--pickable { cursor: crosshair; }

.today-location-splash > .today-location-credits {
  grid-column: 1 / -1;
  margin: 0;
  color: #a8998a;
  font: 400 .78rem/1.45 system-ui, sans-serif;
}

.today-location-splash > .today-location-credits a {
  color: #d9a877;
}

.today-location-splash > .today-location-credits a:focus-visible {
  outline: 3px solid #f6b66e;
  outline-offset: 2px;
}

.today-location-splash .today-location-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
  justify-items: start;
  max-width: 42rem;
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  background: rgba(240, 161, 90, .08);
  border: 1px solid rgba(240, 161, 90, .35);
  border-radius: .25rem;
}

.today-location-splash .today-location-suggestion > * { grid-column: 1 / -1; }

.today-location-splash .today-location-suggestion__question {
  margin: 0;
  color: #ffe0b8;
  font: 400 1.05rem/1.35 Georgia, "Times New Roman", serif;
}

.today-location-splash .today-location-suggestion__note {
  margin: 0;
  color: #bfae98;
  font: 400 .8rem/1.4 system-ui, sans-serif;
}

.today-location-splash .today-location-form-region .today-location-suggestion__use {
  color: #ffe0b8;
  background: transparent;
  border-color: #f0a15a;
}

.today-location-splash .today-location-form-region .today-location-suggestion__use:hover {
  color: #24160e;
  background: #ffc07d;
}

.today-location-map {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: #0f1820;
  border: 1px solid rgba(235, 169, 101, .32);
  border-radius: .25rem;
  isolation: isolate;
}

.today-location-map::before,
.today-location-map::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.today-location-map::before {
  z-index: 1;
  background: linear-gradient(90deg, transparent 49.9%, rgba(235, 169, 101, .16) 50%, transparent 50.1%), linear-gradient(0deg, transparent 49.9%, rgba(235, 169, 101, .16) 50%, transparent 50.1%);
  background-size: 25% 100%, 100% 25%;
}

.today-location-map::after {
  z-index: 2;
  border: 1px solid rgba(255, 214, 157, .24);
  box-shadow: inset 0 0 3rem rgba(3, 7, 11, .52);
}

.today-location-map__world {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .94;
  object-fit: fill;
  filter: sepia(.18) saturate(.72) brightness(.82);
}

.today-location-map__marker {
  position: absolute;
  z-index: 3;
  top: var(--marker-y);
  left: var(--marker-x);
  width: .8rem;
  height: .8rem;
  border: 2px solid #fff2d9;
  border-radius: 50%;
  background: #dc7839;
  box-shadow: 0 0 0 .28rem rgba(220, 120, 57, .22), 0 0 .9rem .15rem rgba(255, 185, 102, .8);
  transform: translate(-50%, -50%);
  transition: left .16s ease, top .16s ease;
}

.today-location-map__description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 42rem) {
  .today-location-splash {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-inline: .75rem;
    padding: 1rem;
  }

  .today-location-splash h1,
  .today-location-splash h2 { font-size: 2rem; }

  .today-location-splash > .today-location-form-region { grid-column: 1; }

  .today-location-splash .today-location-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Narrow phones: keep >=16px outer gutters but give the fields the width. */
@media (max-width: 26rem) {
  .today-location-splash {
    margin-inline: .25rem;
    padding: 1rem .75rem;
  }

  .today-location-splash .today-location-form-region input {
    padding-inline: .5rem;
  }
}

/* Page scroll, not a centered scroll box. The global layout makes .layout
   exactly 100vh and main a flex scroller with align-items: center; a card
   taller than main then overflows upward, above main's scroll origin, where
   no scrolling can reach (the unreachable card top on iPhone). Let the
   document scroll in normal block flow from the top instead. */
body:has(.today-location-splash) .layout {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

body:has(.today-location-splash) main {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  padding-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom));
  padding-inline: max(.5rem, env(safe-area-inset-left)) max(.5rem, env(safe-area-inset-right));
}

@media (min-width: 768px) {
  body:has(.today-location-splash) main {
    padding: 1.5rem;
  }
}