:root {
  --paper: #f6efe2;
  --paper-deep: #eadfcf;
  --ink: #261a12;
  --muted: #75675d;
  --red: #e6322b;
  --red-dark: #b92520;
  --green: #1e6a4a;
  --card: rgba(255,255,255,.62);
  --line: rgba(38,26,18,.14);
  --shadow: 0 18px 55px rgba(70,46,30,.12);
  --radius-lg: 32px;
  --radius-md: 20px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.9), transparent 38rem),
    linear-gradient(180deg, #faf5ec 0%, var(--paper) 65%, #eee2d2 100%);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", Avenir, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }
a { color: inherit; text-underline-offset: .18em; }

.page-shell {
  width: min(100% - 32px, 820px);
  margin: 0 auto;
  padding: clamp(40px, 8vw, 78px) 0 30px;
}

.hero { text-align: center; }
.eyebrow {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--red-dark);
  background: rgba(255,255,255,.48);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1 {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.date {
  margin: 18px 0 26px;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.status-card {
  position: relative;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  min-height: 385px;
  overflow: hidden;
  border: 1px solid rgba(38,26,18,.12);
  border-radius: var(--radius-lg);
  background: #3c2514;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.status-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 20% 30%, rgba(234,112,27,.44), transparent 35%), linear-gradient(135deg, rgba(20,10,5,.1), rgba(20,10,5,.52));
}
.answer-copy {
  z-index: 2;
  padding: 38px 0 38px 38px;
  text-align: left;
  color: white;
}
.answer-label {
  display: block;
  margin-bottom: 5px;
  color: rgba(255,255,255,.72);
  font-size: .95rem;
  font-weight: 700;
}
.answer {
  display: block;
  font-size: clamp(5rem, 17vw, 9.8rem);
  line-height: .85;
  letter-spacing: -.08em;
  text-transform: uppercase;
}
.answer-detail {
  max-width: 19rem;
  margin: 20px 0 0;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
}
.hero-art {
  width: 100%;
  height: 100%;
  min-height: 385px;
  object-fit: cover;
  object-position: center;
  filter: saturate(.96) contrast(1.02);
}
.is-no .hero-art { filter: grayscale(.34) saturate(.55) brightness(.74); }
.is-no::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(38,26,18,.08), rgba(38,26,18,.22));
  pointer-events: none;
}
.is-loading .hero-art { opacity: .72; }

.weather-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 0;
}
.weather-stat {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  backdrop-filter: blur(8px);
}
.weather-stat dt { color: var(--muted); font-weight: 750; }
.weather-stat dd {
  margin: 4px 0 0;
  font-size: clamp(2.7rem, 8vw, 4.6rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.06em;
}
.weather-stat small { color: var(--muted); }

.location-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 28px;
  align-items: center;
  margin-top: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.42);
  text-align: left;
}
.location-panel h2 { margin: 0 0 4px; font-size: 1.05rem; }
.location-panel p { margin: 0; color: var(--muted); }
.location-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.button {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button:focus-visible, input:focus-visible { outline: 3px solid rgba(230,50,43,.25); outline-offset: 2px; }
.button-primary { color: #fff; background: var(--red); box-shadow: 0 8px 18px rgba(230,50,43,.17); }
.button-primary:hover { background: var(--red-dark); }
.button-secondary { color: var(--ink); background: rgba(255,255,255,.7); border-color: var(--line); }
.button[disabled] { cursor: wait; opacity: .65; transform: none; }
.city-form { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }
.city-form label { display: block; margin-bottom: 8px; font-weight: 750; }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
input {
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255,255,255,.9);
}
.form-message { min-height: 1.4em; margin-top: 8px !important; font-size: .9rem; }

.site-footer {
  width: min(100% - 32px, 820px);
  margin: 8px auto 0;
  padding: 24px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
  font-size: .9rem;
  line-height: 1.55;
}
.site-footer p { margin: 5px 0; }
.fine-print { font-size: .8rem; opacity: .8; }

@media (max-width: 650px) {
  .page-shell { width: min(100% - 20px, 820px); padding-top: 30px; }
  .status-card { grid-template-columns: 1fr; min-height: 0; }
  .answer-copy { position: absolute; inset: auto 0 0 0; padding: 80px 24px 24px; background: linear-gradient(transparent, rgba(25,12,5,.88)); }
  .answer { font-size: clamp(5rem, 31vw, 8rem); }
  .answer-label { margin-bottom: 0; }
  .answer-detail { margin-top: 10px; }
  .hero-art { min-height: 520px; object-position: center 42%; }
  .location-panel { grid-template-columns: 1fr; }
  .location-actions { justify-content: stretch; }
  .location-actions .button { flex: 1; }
}

@media (max-width: 430px) {
  .weather-stat { padding: 18px 14px; }
  .weather-stat dd { font-size: 2.6rem; }
  .search-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Churzi-Hosä-Index additions */

.index-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.78);
  font-size: .82rem;
  font-weight: 750;
  backdrop-filter: blur(8px);
}
.index-pill strong { color: white; font-size: .95rem; }

.window-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.42);
  color: var(--muted);
  text-align: left;
}
.window-note strong { color: var(--ink); }

.weather-grid { grid-template-columns: repeat(4, 1fr); }
.weather-stat-wide { grid-column: span 2; }
.weather-stat dd { font-size: clamp(2.1rem, 5vw, 3.7rem); }

.why-panel {
  margin-top: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.48);
  text-align: left;
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(220px, .8fr);
  gap: 24px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.kicker {
  margin: 0 0 5px;
  color: var(--red-dark);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-heading h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.section-heading > p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

.why-list { list-style: none; margin: 0; padding: 0; }
.why-row {
  display: grid;
  grid-template-columns: 1fr minmax(150px, .75fr);
  gap: 20px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.why-row:last-child { border-bottom: 0; padding-bottom: 0; }
.why-row strong { display: block; font-size: .98rem; }
.why-row > div > span { color: var(--muted); font-size: .82rem; }
.why-score { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: center; }
.why-score > span { text-align: right; font-weight: 750; }
meter { width: 100%; height: 10px; accent-color: var(--green); }
.why-placeholder { padding: 18px 0 0; color: var(--muted); }

@media (max-width: 720px) {
  .weather-grid { grid-template-columns: 1fr 1fr; }
  .weather-stat-wide { grid-column: span 2; }
  .section-heading { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 650px) {
  .index-pill { margin-top: 10px; }
  .why-panel { padding: 20px; }
  .why-row { grid-template-columns: 1fr; gap: 8px; }
  .why-score { grid-template-columns: 44px 1fr; }
}

@media (max-width: 430px) {
  .window-note { align-items: flex-start; flex-direction: column; gap: 3px; }
}