@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --wool: #f6f1e8;
  --cream: #f3ece1;
  --sand: #e4d4be;
  --sage: #6d8b74;
  --sage-deep: #3f5644;
  --sky: #8fb7d0;
  --ink: #2b2723;
  --muted: #6d675e;
  --paper: #f7f2ea;
  --card: #fffdf8;
  --hairline: rgb(43 39 35 / .08);
  --accent: #c45c4a;
  --radius: 1.35rem;
  --radius-lg: 1.85rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
  --shadow: 0 18px 40px rgb(62 48 32 / .08);
  --max: 1240px;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-grain: 50;
  --hero-sky: #c9dce8;
  --hero-ground: #8aa56a;
}

html[data-scene="sun"] {
  --hero-sky: #f0d8a4;
  --hero-ground: #8fb36c;
  --accent: #c45c4a;
}
html[data-scene="heat"] {
  --hero-sky: #f3c98a;
  --hero-ground: #c4a15a;
  --accent: #c45c4a;
}
html[data-scene="partly"] {
  --hero-sky: #c5d6c4;
  --hero-ground: #7f9d68;
}
html[data-scene="cloudy"] {
  --hero-sky: #c9c6bf;
  --hero-ground: #7d8a70;
}
html[data-scene="drizzle"],
html[data-scene="rain"] {
  --hero-sky: #8ea4b3;
  --hero-ground: #5f7264;
  --paper: #e7edf0;
}
html[data-scene="wind"] {
  --hero-sky: #b7c6b4;
  --hero-ground: #7a9168;
}
html[data-scene="snow"] {
  --hero-sky: #d5e4ee;
  --hero-ground: #cfd8d4;
  --paper: #eef3f6;
}
html[data-scene="thunder"] {
  --hero-sky: #6e7582;
  --hero-ground: #4d554c;
  --paper: #dfe3e6;
}
html[data-scene="fog"] {
  --hero-sky: #d2d0c8;
  --hero-ground: #9aa090;
}
html[data-mode="night"] {
  --wool: #1b2230;
  --cream: #151b26;
  --paper: #121821;
  --card: #1c2432;
  --ink: #ece7dc;
  --muted: #a8a093;
  --hairline: rgb(236 231 220 / .1);
  --hero-sky: #151c2a;
  --hero-ground: #1e2a22;
  --shadow: 0 18px 40px rgb(0 0 0 / .28);
  --sand: #2a3344;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p, h1, h2, h3 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  z-index: 60;
  padding: .5rem .8rem;
  background: var(--ink);
  color: var(--wool);
  border-radius: 999px;
}
.skip:focus { top: 12px; }

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  width: min(var(--max), calc(100% - 1.75rem));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0 .35rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: 1.05rem;
}
.logo-mark {
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
}
.desk-nav {
  display: none;
  gap: 1.35rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
}
.desk-nav a {
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .desk-nav a:hover { color: var(--ink); }
}
.icon-btn {
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 999px;
  background: rgb(255 253 248 / .7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 1px 0 var(--hairline);
  display: grid;
  place-items: center;
  transition: transform 140ms var(--ease-out), background 180ms var(--ease-out);
}
.icon-btn:active { transform: scale(.97); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 99px;
  position: relative;
  transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-out);
}
.menu-btn span::before,
.menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-btn span::before { top: -5px; }
.menu-btn span::after { top: 5px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-5px) rotate(-45deg); }

.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgb(43 39 35 / .42);
  display: grid;
  align-items: start;
  justify-items: end;
  padding: 4.5rem 1rem 1rem;
}
.overlay-menu[aria-hidden="true"] { display: none; }
.overlay-panel {
  width: min(18rem, 100%);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: .6rem;
  box-shadow: var(--shadow);
}
.overlay-panel a,
.overlay-panel button.linkish {
  display: block;
  width: 100%;
  text-align: left;
  padding: .9rem 1rem;
  border: 0;
  background: transparent;
  text-decoration: none;
  border-radius: 1rem;
  font-weight: 600;
}

.locbar {
  position: sticky;
  top: .55rem;
  z-index: var(--z-sticky);
  margin: .35rem auto 0;
  width: min(var(--max), calc(100% - 1.75rem));
}
.locbar-inner {
  display: flex;
  gap: .5rem;
  padding: .4rem;
  border-radius: 999px;
  background: rgb(255 253 248 / .78);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), 0 10px 30px rgb(62 48 32 / .08);
  border: 1px solid var(--hairline);
}
html[data-mode="night"] .locbar-inner,
html[data-mode="night"] .icon-btn {
  background: rgb(28 36 50 / .82);
}
.loc-form { flex: 1; position: relative; min-width: 0; }
.loc-form input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: .72rem 1rem .72rem 2.7rem;
  outline: none;
}
.loc-form input::placeholder { color: var(--muted); }
.search-ico {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--muted);
  pointer-events: none;
}
.suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .45rem);
  background: var(--card);
  border-radius: 1.2rem;
  padding: .4rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.suggest[hidden] { display: none; }
.suggest button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: .75rem .85rem;
  border-radius: .9rem;
  display: grid;
  gap: .1rem;
}
.suggest button span { color: var(--muted); font-size: .82rem; }
@media (hover: hover) and (pointer: fine) {
  .suggest button:hover { background: rgb(43 39 35 / .04); }
}
#gps-btn.is-ping { animation: ping 1.1s var(--ease-out) infinite; }
@keyframes ping {
  0%, 100% { box-shadow: 0 0 0 0 rgb(196 92 74 / .35); }
  70% { box-shadow: 0 0 0 10px rgb(196 92 74 / 0); }
}
#fav-toggle[aria-pressed="true"] { color: var(--accent); }
#fav-toggle[aria-pressed="true"] svg path { fill: currentColor; }

.hero {
  position: relative;
  min-height: 62dvh;
  margin: .85rem auto 0;
  width: min(var(--max), calc(100% - 1.75rem));
  border-radius: 2rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-sky);
  transition: background 700ms var(--ease-out);
}
.hero.is-crossfading { filter: blur(2px); }
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sky-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 0%, rgb(255 255 255 / .35), transparent 42%),
    radial-gradient(ellipse at 80% 10%, rgb(255 220 160 / .22), transparent 40%);
}
.ground {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -8%;
  height: 38%;
  background: var(--hero-ground);
  border-radius: 50% 50% 0 0 / 28% 28% 0 0;
  transition: background 700ms var(--ease-out);
}
html[data-scene="sun"] .sky-wash {
  background:
    radial-gradient(circle at 86% 12%, #ffe08a 0 7%, rgb(255 224 138 / 0) 38%),
    radial-gradient(ellipse at 20% 0%, rgb(255 255 255 / .4), transparent 46%);
}
html[data-scene="night"] .sky-wash {
  background: radial-gradient(ellipse at 70% 18%, rgb(255 236 190 / .16), transparent 32%);
}
.ambient { position: absolute; inset: 0; overflow: hidden; }
.drop, .flake, .leaf, .star, .fog-bank, .flash {
  position: absolute;
  pointer-events: none;
}
.drop {
  top: -10%;
  width: 2px;
  height: 14px;
  background: rgb(230 240 248 / .75);
  border-radius: 99px;
  animation: fall linear infinite;
}
.flake {
  top: -8%;
  background: #fff;
  border-radius: 50%;
  opacity: .85;
  animation: snow linear infinite;
}
.leaf {
  width: 10px;
  height: 7px;
  background: #8a6a3d;
  border-radius: 0 8px 0 8px;
  animation: fly linear infinite;
  left: -10%;
}
.star {
  width: 3px;
  height: 3px;
  background: #f4e9c8;
  border-radius: 50%;
  animation: twinkle 3.4s var(--ease-move) infinite;
}
.fog-bank {
  height: 40%;
  width: 140%;
  left: -20%;
  background: rgb(245 245 240 / .45);
  filter: blur(18px);
  animation: drift 12s var(--ease-move) infinite;
}
.fog-0 { bottom: 18%; }
.fog-1 { bottom: 32%; animation-duration: 16s; opacity: .55; }
.fog-2 { bottom: 48%; animation-duration: 20s; opacity: .35; }
.flash {
  inset: 0;
  background: rgb(255 255 255 / 0);
  animation: lightning 7s var(--ease-out) infinite;
}
@keyframes fall { to { transform: translateY(120vh); } }
@keyframes snow {
  to { transform: translate3d(18px, 120vh, 0); }
}
@keyframes fly {
  to { transform: translateX(120vw) rotate(220deg); }
}
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes drift {
  50% { transform: translateX(8%); }
}
@keyframes lightning {
  0%, 86%, 100% { background: rgb(255 255 255 / 0); }
  88% { background: rgb(255 255 255 / .38); }
  90% { background: rgb(255 255 255 / 0); }
  92% { background: rgb(255 255 255 / .22); }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 62dvh;
  padding: 1.15rem 1.15rem 0;
  align-items: end;
}
.hero-copy { position: relative; z-index: 2; padding-bottom: 1.1rem; }
.status-line {
  font-size: .82rem;
  font-weight: 500;
  color: rgb(43 39 35 / .72);
}
html[data-mode="night"] .status-line { color: rgb(236 231 220 / .7); }
.temp {
  font-size: clamp(4.6rem, 22vw, 7.2rem);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .88;
  margin-top: .15rem;
}
.condition {
  margin-top: .45rem;
  font-size: 1.15rem;
  font-weight: 600;
}
.quip {
  margin-top: .25rem;
  max-width: 22rem;
  color: var(--ink);
  opacity: .78;
  font-size: .98rem;
}
.kit-chip {
  display: inline-flex;
  margin-top: .85rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgb(255 253 248 / .55);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
}
html[data-mode="night"] .kit-chip { background: rgb(255 255 255 / .08); }

.sheep-frame {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: -.2rem;
  pointer-events: none;
}
.sheep-photo {
  display: block;
  width: min(94%, 380px);
  height: auto;
  max-height: 280px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 28px rgb(48 36 22 / .22));
  transform-origin: 50% 88%;
  animation: breathe 5.2s var(--ease-move) infinite;
  transition: opacity 420ms var(--ease-out), filter 420ms var(--ease-out);
}
.hero.is-crossfading .sheep-photo {
  opacity: .55;
  filter: blur(3px) drop-shadow(0 18px 28px rgb(48 36 22 / .22));
}
[data-scene="wind"] .sheep-photo { animation: lean 3.8s var(--ease-move) infinite; }
[data-scene="snow"] .sheep-photo { animation: shiver 2.6s var(--ease-move) infinite; }
[data-scene="heat"] .hero { animation: shimmer 5s var(--ease-move) infinite; }
.glance-left .sheep-photo { animation: lookL .8s var(--ease-out); }
.glance-right .sheep-photo { animation: lookR .8s var(--ease-out); }
.is-loading .sheep-photo { opacity: .82; }

@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-3px) scale(1.012, .988); }
}
@keyframes lean {
  0%, 100% { transform: rotate(-4deg) translateX(0); }
  45% { transform: rotate(-8deg) translateX(-6px); }
  78% { transform: rotate(-3deg) translateX(3px); }
  90% { transform: rotate(-7deg) translateX(-9px); }
}
@keyframes shiver {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-1.5px); }
  60% { transform: translateX(1.5px); }
}
@keyframes shimmer {
  0%, 100% { filter: none; }
  50% { filter: saturate(1.08) contrast(1.04); }
}
@keyframes lookL { 50% { transform: translateX(-10px) rotate(-3deg); } }
@keyframes lookR { 50% { transform: translateX(10px) rotate(3deg); } }

.section {
  width: min(var(--max), calc(100% - 1.75rem));
  margin: 1.6rem auto 0;
}
.section h2 {
  font-size: 1.05rem;
  letter-spacing: -.02em;
  margin-bottom: .85rem;
}
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.bezel {
  padding: 4px;
  border-radius: calc(var(--radius) + 4px);
  background: rgb(43 39 35 / .045);
  border: 1px solid var(--hairline);
}
.bezel-inner {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7);
  padding: .95rem 1rem .9rem;
}
.stat-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  margin-top: .2rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.03em;
}
.stat-hint { font-size: .78rem; color: var(--muted); }

.hourly {
  display: flex;
  gap: .65rem;
  overflow-x: auto;
  padding: .15rem .1rem .7rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.hourly::-webkit-scrollbar { height: 0; }
.hour-card {
  flex: 0 0 4.6rem;
  scroll-snap-align: start;
  text-align: center;
  padding: .75rem .35rem .7rem;
  border-radius: 1.15rem;
  background: var(--card);
  border: 1px solid var(--hairline);
}
.hour-when, .hour-rain { font-size: .72rem; color: var(--muted); }
.hour-temp { display: block; font-weight: 700; margin-top: .15rem; }
.mini-sheep { width: 2.1rem; height: 2.1rem; margin: .25rem auto; }

.days { display: grid; gap: .65rem; }
.day-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .8rem;
  align-items: center;
}
.day-name { font-weight: 700; }
.day-quip { font-size: .86rem; color: var(--muted); }
.day-temps {
  font-size: 1.05rem;
  text-align: right;
}
.day-temps span { color: var(--muted); font-weight: 500; }
.day-visual .mini-sheep { width: 2.4rem; height: 2.4rem; margin: 0; }

.index-card .bezel-inner { padding: 1.15rem 1.15rem 1.2rem; }
.index-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.index-score {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.04em;
}
.index-title { font-weight: 700; margin-top: .35rem; }
.index-hint { color: var(--muted); margin-top: .2rem; max-width: 36rem; }
.index-track {
  margin-top: 1rem;
  height: 6px;
  border-radius: 99px;
  background: rgb(43 39 35 / .08);
  overflow: hidden;
}
html[data-mode="night"] .index-track { background: rgb(236 231 220 / .12); }
.index-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--sage);
  border-radius: inherit;
  transition: transform 700ms var(--ease-out);
}

.site-footer {
  width: min(var(--max), calc(100% - 1.75rem));
  margin: 2.8rem auto 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: .82rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.2rem;
  justify-content: space-between;
}
.site-footer a { text-decoration: none; }
.footer-links { display: flex; gap: 1rem; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgb(43 39 35 / .38);
  display: grid;
  align-items: end;
}
.sheet[hidden] { display: none; }
.sheet-panel {
  background: var(--card);
  border-radius: 1.6rem 1.6rem 0 0;
  padding: 1rem 1rem 1.4rem;
  max-height: 78dvh;
  overflow: auto;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
}
.fav-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: .85rem .2rem;
  border-bottom: 1px solid var(--hairline);
  display: grid;
}
.fav-item small { color: var(--muted); }
.fav-empty { color: var(--muted); padding: .8rem 0 1rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%) translateY(12px);
  z-index: 45;
  background: var(--ink);
  color: var(--wool);
  padding: .7rem 1rem;
  border-radius: 999px;
  font-size: .86rem;
  opacity: 0;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.error-banner {
  width: min(var(--max), calc(100% - 1.75rem));
  margin: .8rem auto 0;
  padding: .75rem 1rem;
  border-radius: 1rem;
  background: rgb(196 92 74 / .12);
  color: var(--accent);
  font-weight: 600;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

.page-main {
  width: min(42rem, calc(100% - 1.75rem));
  margin: 1.5rem auto 3rem;
}
.page-main h1 {
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: -.04em;
  line-height: 1.1;
  margin: .4rem 0 1rem;
}
.page-main p { margin: 0 0 1rem; color: var(--muted); }
.page-main h2 { margin: 1.6rem 0 .5rem; }
.page-main ol.steps {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.page-main ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0.9rem 0 0.9rem 3.2rem;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
}
.page-main ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--wool);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.85rem;
}
.page-main kbd,
.page-main .chip {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
  font-size: 0.85em;
  font-family: inherit;
}
.script-box {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.6rem 0.85rem 0.85rem;
  margin: 0 0 1.25rem;
}
.script-box pre {
  margin: 0;
  max-height: 16rem;
  overflow: auto;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre;
  tab-size: 2;
}
.copy-btn {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--wool);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
}
.copy-btn:active { transform: scale(0.97); }
.copy-btn.is-done { background: var(--sage-deep); }
.legal-block { margin-bottom: 1.4rem; }

.map-wrap {
  width: min(var(--max), calc(100% - 1.75rem));
  margin: 1rem auto 2rem;
  height: min(70dvh, 640px);
  border-radius: 1.6rem;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.map-wrap #map { height: 100%; }

@media (min-width: 860px) {
  .desk-nav { display: flex; }
  .menu-btn { display: none; }
  .hero-grid {
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    min-height: 68dvh;
    padding: 1.6rem 1.8rem 1rem 2rem;
  }
  .sheep-frame {
    margin: 0;
    min-height: 420px;
    align-items: center;
  }
  .sheep-photo {
    width: min(100%, 520px);
    max-height: 460px;
  }
  .temp { font-size: 7.4rem; }
  .stats { grid-template-columns: repeat(6, 1fr); }
  .sheet { align-items: center; justify-items: center; }
  .sheet-panel {
    width: min(28rem, 92vw);
    border-radius: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}