:root {
  --ink: #12302C;
  --teal: #1F7268;
  --accent: #4CC4B4;
  --paper: #F7FBFA;
  --ground: #E9F4F0;
  --panel: #C6EDE6;
  --rule: #B4DCD3;
  --muted: #2C4A45;
  --hover: #DCF0EA;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad: clamp(20px, 3.5vw, 44px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

button { font: inherit; color: inherit; }

img { display: block; max-width: 100%; }

.paper body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.19 0 0 0 0 0.17 0 0 0 1.1 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.01' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.2 0 0 0 0.5 -0.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.paper :is(.rose, .medallion, .brand, .note-num, .divider) svg { filter: url(#ink); }

.ink-fill { fill: var(--ink); }
.accent-mark { fill: var(--accent); stroke: var(--ink); stroke-width: 7; overflow: visible; }

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.mono { font-family: var(--mono); font-size: 13px; }

.page {
  max-width: 1480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: clamp(10px, 1.6vw, 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 20px);
}

main { display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 20px); }

/* Header */

.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding: 4px 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.top a { text-decoration: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }

.top-nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
.top-nav a { padding: 14px 0; }

/* Chart */

.chart {
  position: relative;
  height: clamp(680px, 92vh, 920px);
  border: 1.5px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}

.band {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 56px, var(--paper) 56px 112px);
}
.band-top, .band-bottom { left: 12px; right: 12px; height: 6px; }
.band-top { top: 12px; }
.band-bottom { bottom: 12px; }
.band-left, .band-right {
  top: 12px; bottom: 12px; width: 6px;
  background: repeating-linear-gradient(180deg, var(--ink) 0 56px, var(--paper) 56px 112px);
}
.band-left { left: 12px; }
.band-right { right: 12px; }

.sea { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sea.is-dragging { cursor: grabbing; }

.map {
  --s: 1;
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s));
}
.map.is-easing { transition: transform 0.35s ease; }

.fill.fill-wide { left: -100%; top: -100%; width: 300%; height: 300%; }


.fill { position: absolute; inset: 0; width: 100%; height: 100%; }

.course { animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }

.soundings span {
  position: absolute;
  font-family: var(--mono);
  font-size: 11px;
  font-style: italic;
  color: #8DC0B6;
}

.rose {
  position: absolute;
  left: 34%;
  top: 62%;
  width: 220px;
  height: 220px;
  transform: translate(-110px, -110px);
  pointer-events: none;
}

.crosshair { pointer-events: none; }
.crosshair[hidden] { display: none; }
.cross-v, .cross-h, .cross-ring, .cross-readout { position: absolute; pointer-events: none; }
.cross-v { top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(18, 48, 44, 0.35); left: var(--cx); }
.cross-h { left: 0; right: 0; height: 0; border-top: 1px dashed rgba(18, 48, 44, 0.35); top: var(--cy); }
.cross-ring {
  left: var(--cx); top: var(--cy);
  width: 18px; height: 18px;
  transform: translate(-9px, -9px) scale(calc(1 / var(--s)));
  border: 1px solid var(--ink);
  border-radius: 999px;
}
.cross-readout {
  left: var(--cx); top: var(--cy);
  transform: translate(16px, 16px) scale(calc(1 / var(--s)));
  transform-origin: 0 0;
  z-index: 5;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 9px;
  white-space: nowrap;
}

.filters {
  position: absolute;
  right: 36px;
  top: 36px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.chip {
  all: unset;
  cursor: pointer;
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.chip span { opacity: 0.65; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; }

/* Waypoints */

.wp {
  all: unset;
  cursor: pointer;
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  z-index: 1;
  transform: scale(calc(1 / var(--s)));
  transition: opacity 0.3s;
}
.wp[data-app="recipy"] { left: 58.53%; top: 38.13%; }
.wp[data-app="lowbuy"] { left: 73.96%; top: 58.02%; }
.wp[data-app="roomclean"] { left: 65.97%; top: 80.2%; }
.wp[aria-pressed="true"] { z-index: 3; }
.wp.is-hovered { z-index: 4; }
.wp.is-dimmed { opacity: 0.25; }
.wp:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 999px; }

.wp-mark {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wp-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.wp[aria-pressed="true"] .wp-icon, .wp.is-hovered .wp-icon { outline: 1.5px solid var(--ink); outline-offset: 2px; }

.wp-pulse {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1.5px solid var(--teal);
  display: none;
  animation: pulse 2s ease-out infinite;
}
.wp[aria-pressed="true"] .wp-pulse, .wp.is-hovered .wp-pulse { display: block; }
@keyframes pulse {
  0% { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}

.wp-label {
  position: absolute;
  top: -8px;
  left: 44px;
  display: flex;
  align-items: flex-start;
}

.wp-rule { width: 22px; height: 1px; background: var(--ink); flex-shrink: 0; margin-top: 30px; }

.wp-tag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 8px 12px 10px;
  white-space: nowrap;
}
.wp:hover .wp-tag { border-color: var(--ink); }
.wp[aria-pressed="true"] .wp-tag, .wp.is-hovered .wp-tag { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.wp-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.wp-name { font-family: var(--serif); font-size: 26px; line-height: 1; }

.wp-more {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(247, 251, 250, 0.3);
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  width: 240px;
}
.wp.is-hovered .wp-more { display: flex; }
.wp-hint { opacity: 0.75; }

/* Cartouche, legend, scale */

.cartouche {
  position: absolute;
  left: 44px;
  top: 44px;
  z-index: 3;
  width: min(430px, calc(100% - 88px));
  border: 1.5px solid var(--ink);
  background: var(--paper);
}

.cartouche-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cartouche-head { align-items: center; padding-top: 0; padding-bottom: 0; min-height: 40px; }
.cartouche-head-end { display: inline-flex; align-items: center; gap: 4px; }
.cartouche-head-end > span { margin-right: 8px; }
.no-js .cartouche-btn { display: none; }

.cartouche-btn {
  all: unset;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
}
.cartouche-btn:hover { background: var(--hover); }
.cartouche-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

.cartouche[hidden] { display: none; }

.cartouche-restore {
  all: unset;
  cursor: pointer;
  position: absolute;
  left: 44px;
  top: 44px;
  z-index: 3;
  min-height: 40px;
  padding: 0 14px 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cartouche-restore span { font-size: 15px; letter-spacing: 0; }
.cartouche-restore[hidden] { display: none; }
.cartouche-restore:hover { background: var(--hover); }
.cartouche-restore:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.cartouche-body {
  margin: 6px;
  padding: 22px 22px 24px;
  outline: 1px solid var(--ink);
  outline-offset: -6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cartouche h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(60px, 7vw, 96px);
  line-height: 0.86;
  letter-spacing: -0.02em;
}
.cartouche h1 em, .bearing-lead em { color: var(--teal); }

.divider { display: flex; align-items: center; gap: 10px; }
.divider span { flex: 1; height: 1px; background: var(--ink); }

.cartouche p { margin: 0; font-size: 16px; line-height: 1.5; max-width: 330px; }

.cartouche-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

.legend {
  position: absolute;
  bottom: 44px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legend {
  left: 44px;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legend span { display: flex; align-items: center; gap: 10px; }
.legend .legend-title { font-weight: 500; }


/* Panels */

.panel { border: 1.5px solid var(--ink); background: var(--paper); }

/* The log */

.log-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: clamp(24px, 3.5vw, 44px) var(--pad) 20px;
}

h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 0.95;
}

.log-table-wrap { overflow-x: auto; scroll-margin-top: 12px; }
.log-table { min-width: 680px; }

.log-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 180px 100px 120px;
  gap: 16px;
  align-items: center;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--rule);
}

button.log-row {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 180px 100px 120px;
  gap: 16px;
  align-items: center;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
button.log-row:hover { background: var(--hover); }
button.log-row[aria-pressed="true"] { background: var(--panel); }
button.log-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }

.log-row-head {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.log-name { font-family: var(--serif); font-size: 30px; line-height: 1; }

.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); border: 1px solid var(--ink); }

.entry { display: flex; flex-wrap: wrap; border-top: 1.5px solid var(--ink); }
.js .entry:not(.is-current) { display: none; }

.entry-info {
  flex: 1 1 380px;
  min-width: 0;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.entry-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.entry-arrows { display: flex; gap: 8px; }
.no-js .entry-arrows { display: none; }

.square-btn {
  all: unset;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
}
.square-btn:hover { background: var(--hover); }
.square-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.entry-title { display: flex; align-items: center; gap: 20px; }
.entry-title img {
  width: clamp(64px, 7vw, 88px);
  height: auto;
  border-radius: 22%;
  border: 1px solid var(--ink);
  flex-shrink: 0;
}

h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 6vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.entry-blurb { margin: 0; max-width: 460px; font-size: 18px; line-height: 1.6; }

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.facts div { padding: 14px 0; }
.facts div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.facts dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}
.facts dd { margin: 0; font-size: 15px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: background 0.2s;
}
.store:hover { background: var(--hover); color: var(--ink); }
.store svg { flex-shrink: 0; width: 16px; height: 16px; }
.store-text { display: flex; align-items: baseline; gap: 10px; }
.store-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.store-rating { font-family: var(--mono); font-size: 12px; color: var(--teal); }
.store-star { color: var(--teal); margin-left: 2px; }

.support-link {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  text-underline-offset: 4px;
  padding: 8px 0;
  margin-top: -14px;
}

.platform-logos { display: inline-flex; align-items: center; gap: 10px; }

.entry-shots {
  flex: 1 1 460px;
  min-width: 0;
  min-height: 480px;
  border-left: 1px solid var(--ink);
  background-color: var(--panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 0 L64 32 L32 64 L0 32 Z M9.4 9.4 H54.6 V54.6 H9.4 Z' fill='none' stroke='%23A3D6CC'/%3E%3Cpath d='M32 22 L42 32 L32 42 L22 32 Z' fill='%23B4E0D7'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
}

.shots {
  list-style: none;
  margin: 0;
  padding: 40px 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
  width: 100%;
}
.phone {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  padding: 4px;
  scroll-snap-align: start;
}
.phone::before, .phone::after { content: ""; position: absolute; pointer-events: none; }
.phone::before {
  inset: 0;
  border-radius: 22px;
  background: var(--ink);
  filter: url(#rough);
}
.phone::after {
  inset: 3px;
  z-index: 2;
  border: 1.5px solid var(--ink);
  border-radius: 19px;
  filter: url(#rough-line);
}
.phone:nth-child(even) { margin-top: 60px; }
.phone img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.phone video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.paper .phone img { filter: saturate(0.85) sepia(0.08) contrast(0.96); }

.browser {
  position: relative;
  flex: 0 0 auto;
  width: 440px;
  padding: 0 4px 4px;
  scroll-snap-align: start;
}
.browser::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--ink);
  filter: url(#rough);
  pointer-events: none;
}
.browser-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 30px;
  padding: 0 12px;
  color: var(--panel);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.browser-dots { display: inline-flex; gap: 5px; }
.browser-dots i { width: 7px; height: 7px; border-radius: 999px; border: 1px solid var(--panel); }
.browser-shot { position: relative; z-index: 1; }
.browser-shot img { width: 100%; height: auto; border-radius: 0 0 12px 12px; }
.ba {
  position: absolute;
  top: 10px;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ba-before { left: 10px; }
.ba-after { left: calc(50% + 10px); }
.shots-web .browser:nth-child(even) { margin-top: 60px; }

/* Strips */

.strip { height: 30px; border: 1.5px solid var(--ink); }
.strip-light {
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 5 L25 15 L15 25 L5 15 Z M7.9 7.9 H22.1 V22.1 H7.9 Z' fill='%234CC4B4' stroke='%2312302C' stroke-width='0.8'/%3E%3C/svg%3E") 0 0 / 27px 27px round;
}
.strip-dark {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 5 L25 15 L15 25 L5 15 Z M7.9 7.9 H22.1 V22.1 H7.9 Z' fill='none' stroke='%234CC4B4' stroke-width='0.9'/%3E%3C/svg%3E") 0 0 / 27px 27px round;
}

/* Our bearing */

.bearing { display: flex; flex-wrap: wrap; }

.medallion {
  flex: 0 1 420px;
  min-height: 420px;
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--ink);
  background-color: var(--panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 0 L64 32 L32 64 L0 32 Z M9.4 9.4 H54.6 V54.6 H9.4 Z' fill='none' stroke='%23A3D6CC'/%3E%3C/svg%3E");
}
.medallion svg { max-width: 100%; height: auto; }

.bearing-body {
  flex: 1 1 420px;
  min-width: 0;
  padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.bearing-lead {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(36px, 4.2vw, 62px);
  line-height: 1.04;
  max-width: 820px;
}

.notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--ink);
}
.notes li {
  padding: 20px 24px 22px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note-num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.note-title { font-family: var(--serif); font-size: 28px; line-height: 1.05; }
.note-text { font-size: 15px; line-height: 1.55; color: var(--muted); }

.bearing-close {
  margin: 0;
  max-width: 620px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  color: var(--teal);
}

/* Signal */

.signal {
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #EEF7F4;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px) 28px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.signal .label { color: #8FDCD0; }
.signal a { color: #C6EDE6; }
.signal a:hover { color: #FFFFFF; }

.signal-body { display: flex; flex-direction: column; gap: 18px; }

.signal .signal-mail {
  color: #EEF7F4;
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 104px);
  line-height: 1;
  text-underline-offset: 10px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}

.signal-sub { font-size: 16px; color: var(--panel); }

.support-lines {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
}
.support-lines li { display: flex; flex-direction: column; gap: 4px; }
.support-lines a { font-size: 17px; min-height: 28px; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  border-top: 1px solid #2F5550;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.foot > span { color: #8FDCD0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot nav a { text-decoration: none; padding: 14px 0; }

/* Phone width */

@media (max-width: 900px) {
  .chart {
    height: auto;
    padding: 28px 20px;
    background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 0 L64 32 L32 64 L0 32 Z M9.4 9.4 H54.6 V54.6 H9.4 Z' fill='none' stroke='%23B4DCD3'/%3E%3C/svg%3E");
  }
  .sea, .band, .legend, .cartouche-restore, .cartouche-btn, .cartouche-hint { display: none; }
  .cartouche, .cartouche[hidden] { display: block; position: relative; left: auto; top: auto; width: auto; }
  .log-head .label, .log-table-wrap, .entry-arrows { display: none; }
  .js .entry:not(.is-current) { display: flex; }
  .entry-shots { border-left: 0; border-top: 1px solid var(--ink); min-height: 0; }
  .shots { padding: 28px 20px; }
  .phone { width: 180px; }
  .browser { width: 300px; }
  .medallion { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .course, .wp-pulse { animation: none; }
}