body{min-height:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto;-webkit-font-smoothing:antialiased}
.home{position:relative;isolation:isolate;min-height:720px;display:grid;place-items:center;overflow:hidden;background:var(--paper);padding:100px 24px 90px}
.map{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--paper)}
.map svg{position:absolute;width:100%;height:100%;inset:0}
.map .coast path{fill:none;stroke:#8e9c9b;stroke-width:.7;stroke-opacity:.16;vector-effect:non-scaling-stroke}
.map .isotherm{fill:none;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.48}
.map .isotherm path{vector-effect:non-scaling-stroke}.map .isotherm .index{stroke-width:1.35;stroke-opacity:.8}
.map .cool{stroke:#29728c}.map .mild{stroke:#80b5be}.map .warm{stroke:#c69c4d}.map .hot{stroke:#d76a42}.map .very-hot{stroke:#9e2b25}
.map-caption{position:absolute;top:clamp(22px,2.7vw,40px);left:clamp(22px,4vw,96px);right:clamp(22px,4vw,96px);padding-bottom:13px;border-bottom:1px solid #b9c3bf;color:var(--muted);font-size:var(--text-xs);letter-spacing:.13em;text-transform:uppercase;z-index:var(--z-overlay)}
.hero{position:relative;z-index:var(--z-overlay);width:min(550px,100%);text-align:center;color:var(--ink)}
.hero::before{content:"";position:absolute;z-index:var(--z-backdrop);inset:-100px -145px;background:radial-gradient(ellipse,rgba(244,244,239,1) 0%,rgba(244,244,239,.98) 42%,rgba(244,244,239,.9) 55%,rgba(244,244,239,.4) 73%,rgba(244,244,239,0) 100%);pointer-events:none}
.identity{margin:0 0 26px}.identity img{display:block;width:36px;height:36px;margin:auto}
.eyebrow{margin:0 0 16px;color:var(--muted);font-size:var(--text-xs);letter-spacing:.15em;text-transform:uppercase}
h1{margin:0 0 20px;font-size:clamp(60px,6vw,88px);font-weight:600;line-height:1;letter-spacing:-.055em}
.lead{max-width:26em;margin:0 auto 34px;font-size:20px;line-height:1.45}
.entries{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #aeb8b1;border-bottom:1px solid #aeb8b1}.entries a{position:relative;padding:22px 18px 23px;color:var(--ink);text-decoration:none;transition:background .2s ease}.entries a+a{border-left:1px solid #aeb8b1}.entries a:hover{background:rgba(234,234,227,.8)}.entries a:focus-visible{outline:2px solid var(--cool);outline-offset:4px}.entries strong{display:block;font-size:18px;font-weight:600;letter-spacing:-.015em}.entries small{display:block;margin-top:9px;font-size:13px;line-height:1.5;color:#46545d}.entries .arrow{display:block;margin-top:12px;font-size:19px;color:var(--cool);line-height:1}.context{max-width:36em;margin:23px auto 0;font-size:12px;line-height:1.5;color:var(--muted)}
.map-key{position:absolute;right:clamp(24px,4vw,96px);bottom:26px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--text-xs);z-index:var(--z-overlay)}.map-key i{display:block;width:88px;height:3px;background:linear-gradient(90deg,#29728c,#80b5be,#c69c4d,#d76a42,#9e2b25)}
@media(min-width:2000px){.hero{width:650px}h1{font-size:104px}.lead{font-size:23px}.entries strong{font-size:21px}.entries small{font-size:15px}.context{font-size:14px}.map-caption,.map-key{font-size:13px}}
@media(max-width:700px){.home{min-height:730px;padding:110px 28px 100px}.map-caption{top:22px;left:22px;right:22px;font-size:var(--text-xs);letter-spacing:.1em}.hero::before{inset:-75px -65px}.identity{margin-bottom:23px}.identity img{width:32px;height:32px}.eyebrow{font-size:var(--text-xs);letter-spacing:.12em}h1{font-size:58px;margin-bottom:20px}.lead{font-size:17px;margin-bottom:28px}.entries a{padding:18px 10px}.entries strong{font-size:15px}.entries small{font-size:12px;line-height:1.45}.context{font-size:var(--text-xs);margin-top:21px}.map-key{right:22px;bottom:23px;font-size:var(--text-xs)}.map-key i{width:56px}.hg-footer{gap:4px;padding:7px 16px;font-size:var(--text-xs)}}
@media(prefers-reduced-motion:reduce){.entries a{transition:none}}

.map-caption span,.map-key{background:rgba(244,244,239,.96)}
.map-caption span{padding:4px 8px 4px 0}.map-key{padding:5px 0 5px 8px}
/* Reveal: a soft circle grows from behind the title. Only the mask animates; the
   contour paths are never re-dashed or re-stroked, so nothing flickers. */
#home-map > svg{animation:map-reveal 2.4s cubic-bezier(.35,.15,.25,1) backwards;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%}
@keyframes map-reveal{
  from{-webkit-mask-image:radial-gradient(circle closest-side,#000 55%,transparent);mask-image:radial-gradient(circle closest-side,#000 55%,transparent);-webkit-mask-size:50vmax 50vmax;mask-size:50vmax 50vmax}
  to{-webkit-mask-image:radial-gradient(circle closest-side,#000 55%,transparent);mask-image:radial-gradient(circle closest-side,#000 55%,transparent);-webkit-mask-size:300vmax 300vmax;mask-size:300vmax 300vmax}}
@media(prefers-reduced-motion:reduce){#home-map > svg{animation:none}}

/* Equal link rows keep arrows aligned when a description wraps. */
.entries a { display:grid; grid-template-rows:auto 1fr auto; gap:16px; padding:24px 16px; }
.entries small, .entries .arrow { margin-top:0; }
.entries a { grid-template-rows:1fr auto; }
.entries .arrow { align-self:end; }