:root {
  --bg: #12101a;
  --bg-soft: #1c1928;
  --bg-sink: #16141f;
  --ink: #ffffff;
  --ink-dim: #a29db8;
  --line: rgba(255, 255, 255, 0.1);

  --hot-a: #fd5068;
  --hot-b: #ff8a5b;
  --warm: #ffb03a;
  --cool: #5bb8ff;

  --radius: 18px;
  /* The cameras are the point of the page, so give them the screen. Caps
     rather than fixes the width, so narrower laptops still fill out. */
  --shell: 1400px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px 16px 28px;
}

/* ---------- header ---------- */

.top {
  text-align: center;
  padding-bottom: 18px;
}

/* The brand sits above the app's own name rather than only in the footer.
   Small and quiet on purpose: it should read as who this is from, not as a
   heading competing with the name underneath it. */
.eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eyebrow a {
  color: rgba(162, 157, 184, 0.75);
  text-decoration: none;
}

.eyebrow a:hover {
  color: var(--ink);
}

.logo {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(94deg, var(--hot-a), var(--hot-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The trailing dots are part of the name and must not be dimmed with opacity:
   that makes a new stacking context, which breaks the heading's
   background-clip gradient and paints them transparent in Chrome. They take
   the gradient with the rest of the word instead. */
.logo-dots {
  letter-spacing: -0.02em;
}

.tagline {
  margin: 3px 0 0;
  color: var(--ink-dim);
  font-size: 14px;
}

/* The word the whole thing turns on, marked the way the panes mark theirs.
   Deliberately inline rather than inline-flex: a flex box here sits on its own
   baseline and throws the centred line out of true. */
.tagline-live {
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.tagline-live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--hot-a);
  vertical-align: 0.14em; /* optical centre of lowercase text, not the baseline */
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

/* ---------- picker ---------- */

.picker {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}

.picker-side {
  min-width: 0;
}

.picker-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 5px;
}

.picker-vs {
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.select,
.input {
  width: 100%;
  appearance: none;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.select:focus-visible,
.input:focus-visible {
  outline: 2px solid var(--hot-b);
  outline-offset: 2px;
}

/* Date inputs sit on a dark field, so the native picker icon needs inverting. */
.input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* ---------- the two panes ---------- */

.panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pane {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* 16:9 is what these cameras actually shoot. Anything else crops the sides
     off every view for no reason. */
  aspect-ratio: 16 / 9;
}

.pane-media,
.pane-media iframe,
.pane-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

/* Holds the labels over the camera. Deliberately no gradient: an Irish sea is
   dull enough without being dimmed, and a washed-out beach sells nothing. Each
   label carries its own backing instead, so only the text darkens the picture. */
.pane-skin {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 11px 13px;
  pointer-events: none;
}

.pane-top {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  max-width: calc(100% - 62px); /* leaves room for the live badge opposite */
  background: rgba(8, 6, 14, 0.62);
  padding: 4px 9px;
  border-radius: 999px;
}

.pane-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.pane-spot {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pane-bottom {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.pane-temp {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 2px rgba(8, 6, 14, 0.9), 0 2px 12px rgba(8, 6, 14, 0.8),
    0 0 26px rgba(8, 6, 14, 0.55);
}

.pane-temp.is-pending {
  opacity: 0.35;
}

.pane-cond {
  font-size: 12.5px;
  text-align: right;
  color: #fff;
  max-width: 58%;
  background: rgba(8, 6, 14, 0.62);
  padding: 4px 9px;
  border-radius: 999px;
}

.pane-live {
  position: absolute;
  top: 11px;
  right: 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(8, 6, 14, 0.62);
  color: #fff;
}

.pane-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hot-a);
}

.pane-live.is-still::before {
  background: var(--ink-dim);
}

/* Phones block autoplay, so live cams get a still and a play button there. */
.pane-tap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--bg-sink);
  cursor: pointer;
  display: block;
}

.pane-tap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pane-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(8, 6, 14, 0.62);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

/* Shown when a camera has no picture to give us. */
.pane-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 26px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
  background: var(--bg-sink);
}

/* Once the panes are big, the labels sized for a phone look lost on them. */
@media (min-width: 1100px) {
  .pane-skin {
    padding: 15px 18px;
  }

  .pane-name {
    font-size: 21px;
  }

  .pane-spot {
    font-size: 14px;
  }

  .pane-temp {
    font-size: 52px;
  }

  .pane-cond {
    font-size: 15px;
  }

  .pane-live {
    top: 15px;
    right: 18px;
    font-size: 11px;
    padding: 4px 9px;
  }

  .logo {
    font-size: 38px;
  }

  .tagline {
    font-size: 16px;
  }

  .verdict {
    font-size: 22px;
  }
}

/* ---------- the contrast line ---------- */

.verdict {
  margin: 14px 0 6px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  min-height: 26px;
}

.verdict b {
  background: linear-gradient(94deg, var(--hot-a), var(--hot-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- dates ---------- */

.dates {
  margin-top: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.dates-head {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.dates-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.outlook {
  margin-top: 14px;
}

.outlook-note {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0 0 11px;
}

.outlook-note b {
  color: var(--ink);
  font-weight: 700;
}

/* Says plainly whether these are real forecasts or long-run averages. */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 9px;
}

.badge.is-forecast {
  background: rgba(91, 184, 255, 0.16);
  color: var(--cool);
}

.badge.is-typical {
  background: rgba(255, 176, 58, 0.16);
  color: var(--warm);
}

.days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(62px, 1fr);
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.day {
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 6px;
  text-align: center;
}

.day-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.day-icon {
  font-size: 19px;
  line-height: 1.5;
}

.day-temp {
  font-size: 15px;
  font-weight: 800;
}

.day-rain {
  font-size: 10px;
  color: var(--cool);
  min-height: 14px;
}

/* The long-range summary, when the dates are past the forecast horizon. */
.typical {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stat {
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
}

.stat-num {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 1px;
}

/* ---------- the ask ----------
   The point of the site. It sits directly under the dates, because that is the
   moment someone has just seen how much warmer it is and picked when they would
   go. Styled like TindAir's so the two apps feel like one family. */

.cta {
  margin-top: 16px;
  background: linear-gradient(135deg, rgba(253, 80, 104, 0.16), rgba(255, 138, 91, 0.1));
  border: 1px solid rgba(253, 80, 104, 0.35);
  border-radius: var(--radius);
  padding: 20px 18px;
  text-align: center;
}

.cta h3 {
  margin: 0 0 5px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.cta p {
  margin: 0 auto 14px;
  max-width: 46ch;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.45;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(100deg, var(--hot-a), var(--hot-b));
  border: none;
  border-radius: 999px;
  padding: 13px 30px;
  cursor: pointer;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn:focus-visible {
  outline: 2px solid var(--hot-b);
  outline-offset: 3px;
}

/* ---------- footer ---------- */

.foot {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim);
}

.foot p {
  margin: 5px 0;
}

.foot a {
  color: var(--ink-dim);
}

.credits:empty {
  display: none;
}

/* ---------- narrow screens ---------- */

@media (max-width: 640px) {
  .panes {
    grid-template-columns: 1fr;
  }

  .pane {
    aspect-ratio: 16 / 9;
  }

  .picker {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .picker-vs {
    display: none;
  }

  .verdict {
    font-size: 16px;
  }

  .typical {
    grid-template-columns: 1fr;
  }

  .stat {
    display: flex;
    align-items: baseline;
    gap: 9px;
  }

  .stat-label {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}