/* Compass of ideas: a quiet editorial illustration, isolated from newsletter controls. */
.public-newsletter .newsletter-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 18px 0;
  transform: none;
  background: none;
  overflow: visible;
}
.public-newsletter .newsletter-visual::before,
.public-newsletter .newsletter-visual::after { content: none; }
.newsletter-compass {
  --compass-paper: #f8f8f0;
  --compass-white: #fffef6;
  --compass-forest: #244334;
  --compass-deep: #193b2d;
  --compass-olive: #76834e;
  --compass-muted: #68735e;
  --compass-lime: #d8e89b;
  --compass-line: #c6ceb6;
  --compass-play: paused;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 6px 12px 0;
  box-sizing: border-box;
  color: var(--compass-forest);
  font-family: var(--sans, "Segoe UI", Arial, sans-serif);
}
.newsletter-compass[data-compass-motion="running"] { --compass-play: running; }
.newsletter-compass .compass-label {
  display: block;
  margin: 0 0 10px 8px;
  font: 11px/1.4 var(--sans, "Segoe UI", Arial, sans-serif);
  letter-spacing: 1.25px;
  color: var(--compass-muted);
  overflow-wrap: anywhere;
}
.newsletter-compass .compass-label:empty { display: none; }
.newsletter-compass .compass-scene {
  --compass-look-x: 0deg;
  --compass-look-y: 0deg;
  position: relative;
  width: 100%;
  aspect-ratio: 38 / 35;
  transform: perspective(1000px) rotateX(var(--compass-look-y)) rotateY(var(--compass-look-x));
  transition: transform .6s ease-out;
}
.newsletter-compass .compass-orbit { position:absolute; border:1px solid var(--compass-line); border-radius:50%; }
.newsletter-compass .compass-orbit-outer { inset:4.85% 8.95% 6%; transform:rotate(-25deg) scaleY(.94); }
.newsletter-compass .compass-orbit-inner { inset:12.57% 15.26% 13.71%; opacity:.55; }
.newsletter-compass .compass-ticks {
  position:absolute; inset:17.14% 19.47% 18.28%; border-radius:50%; opacity:.65;
  background:repeating-conic-gradient(from 0deg,var(--compass-olive) 0deg .8deg,transparent .8deg 15deg);
  -webkit-mask:radial-gradient(transparent 66%,#000 66.5% 68%,transparent 68.5%);
  mask:radial-gradient(transparent 66%,#000 66.5% 68%,transparent 68.5%);
}
.newsletter-compass .compass-traveller {
  position:absolute; inset:4.85% 8.95% 6%; border-radius:50%;
  animation:newsletter-compass-travel 36s linear infinite;
  animation-play-state:var(--compass-play);
}
.newsletter-compass .compass-traveller>span {
  position:absolute; top:-4px; left:50%; width:8px; height:8px; background:var(--compass-olive);
  border:3px solid var(--compass-paper); box-sizing:content-box; border-radius:50%;
}
.newsletter-compass .compass-core {
  position:absolute; width:48.68%; aspect-ratio:1; top:23.14%; left:25.53%; border-radius:50%;
  background:var(--compass-forest); color:var(--compass-lime);
  box-shadow:0 15px 26px #1a352222,inset 0 0 0 1px var(--compass-deep),inset 0 0 0 7px var(--compass-forest),inset 0 0 0 8px #b8c58c70;
  animation:newsletter-compass-breathe 10s ease-in-out infinite;
  animation-play-state:var(--compass-play);
}
.newsletter-compass .compass-glass {position:absolute;inset:7%;border:1px solid #d8e89b35;border-radius:50%;}
.newsletter-compass .compass-star {
  position:absolute;inset:20.54%;opacity:.65;
  animation:newsletter-compass-star-turn 48s linear infinite;
  animation-play-state:var(--compass-play);
}
.newsletter-compass .compass-star>span {position:absolute;width:100%;height:1px;background:var(--compass-lime);top:50%;left:0;}
.newsletter-compass .compass-star>span:nth-child(2) {transform:rotate(45deg);}
.newsletter-compass .compass-star>span:nth-child(3) {transform:rotate(90deg);}
.newsletter-compass .compass-star>span:nth-child(4) {transform:rotate(135deg);}
.newsletter-compass .compass-needle {
  position:absolute;inset:15.68% 43.24%;transform:rotate(24deg);
  animation:newsletter-compass-find-north 12s ease-in-out infinite;
  animation-play-state:var(--compass-play);
}
.newsletter-compass .compass-needle>span:first-child {position:absolute;top:0;left:0;width:100%;height:50%;background:var(--compass-lime);clip-path:polygon(50% 0,100% 100%,50% 82%,0 100%);}
.newsletter-compass .compass-needle>span:last-child {position:absolute;bottom:0;left:0;width:100%;height:50%;background:#b1bb8d66;clip-path:polygon(50% 100%,100% 0,50% 18%,0 0);}
.newsletter-compass .compass-pin {position:absolute;width:8px;height:8px;background:var(--compass-paper);border-radius:50%;top:calc(50% - 4px);left:calc(50% - 4px);box-shadow:0 0 0 4px var(--compass-forest);}
.newsletter-compass .compass-north,.newsletter-compass .compass-south {position:absolute;left:0;width:100%;text-align:center;font:11px/1 var(--sans,"Segoe UI",Arial,sans-serif);color:var(--compass-lime);letter-spacing:1px;}
.newsletter-compass .compass-north {top:9%;}
.newsletter-compass .compass-south {bottom:8%;opacity:.65;}
.newsletter-compass .compass-slip {
  --compass-rest-angle:-6deg;
  position:absolute;display:flex;align-items:center;gap:9px;padding:13px 12px;
  width:max-content;max-width:68%;box-sizing:border-box;
  background:var(--compass-white);border:1px solid var(--compass-line);box-shadow:0 7px 14px #293d2410;
  font:17px/1.2 var(--serif,Georgia,"Times New Roman",serif);
  transform:rotate(var(--compass-rest-angle));
  animation:newsletter-compass-drift 10s ease-in-out infinite;
  animation-play-state:var(--compass-play);
}
.newsletter-compass .compass-slip>span:not(.compass-index) {min-width:0;overflow-wrap:anywhere;}
.newsletter-compass .compass-slip .compass-index {flex-shrink:0;font:11px/1 var(--sans,"Segoe UI",Arial,sans-serif);color:var(--compass-olive);}
.newsletter-compass .compass-slip i {flex-shrink:0;height:6px;width:6px;border-radius:50%;background:var(--compass-lime);}
.newsletter-compass .compass-slip-a {top:11.14%;left:1%;--compass-rest-angle:-7deg;}
.newsletter-compass .compass-slip-b {top:24%;right:0;max-width:76%;--compass-rest-angle:5deg;animation-delay:-3.3s;}
.newsletter-compass .compass-slip-c {top:75.14%;left:3.16%;--compass-rest-angle:-3deg;animation-delay:-6.6s;}
.newsletter-compass .compass-pencil-arc {position:absolute;left:11.3%;top:54.57%;width:6.84%;height:14.28%;border-left:1px solid var(--compass-olive);border-bottom:1px solid var(--compass-olive);border-radius:0 0 0 85%;transform:rotate(-30deg);opacity:.7;}
@keyframes newsletter-compass-travel {to{transform:rotate(360deg);}}
@keyframes newsletter-compass-star-turn {to{transform:rotate(360deg);}}
@keyframes newsletter-compass-breathe {0%,100%{transform:translateY(0);}50%{transform:translateY(-2.5px);}}
@keyframes newsletter-compass-find-north {0%,100%{transform:rotate(30deg);}36%{transform:rotate(18deg);}70%{transform:rotate(25deg);}}
@keyframes newsletter-compass-drift {0%,100%{transform:translateY(0) rotate(var(--compass-rest-angle));}50%{transform:translateY(-5px) rotate(calc(var(--compass-rest-angle) + 1deg));}}
@media(max-width:600px) {
  .newsletter-compass {max-width:350px;padding-inline:10px;}
  .newsletter-compass .compass-label {font-size:11px;letter-spacing:1px;}
  .newsletter-compass .compass-slip {gap:8px;padding:11px 10px;font-size:15px;max-width:68%;}
  .newsletter-compass .compass-slip-b {top:22%;max-width:76%;}
}
@media(max-width:360px) {
  .newsletter-compass .compass-slip {gap:7px;padding:10px 9px;font-size:14px;}
  .newsletter-compass .compass-slip .compass-index {font-size:10px;}
}
@media(prefers-reduced-motion:reduce) {
  .newsletter-compass .compass-traveller,
  .newsletter-compass .compass-core,
  .newsletter-compass .compass-star,
  .newsletter-compass .compass-needle,
  .newsletter-compass .compass-slip {animation:none !important;}
  .newsletter-compass .compass-scene {transform:none !important;transition:none;}
}