@font-face{font-family:"Garamond";src:url(fonts/garamond.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Garamond";src:url(fonts/garamond-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
:root{--paper:#f1ebdf;--ink:#2a2620;--soft:#6f665a;--rule:#cfc4b0;--gold:#b0812f;--night:#33406a;--red:#b4432c}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:"Garamond",Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background-image:var(--grain);}
a{color:inherit}
.top{display:flex;justify-content:space-between;align-items:baseline;padding:18px 28px 0;font-variant:small-caps;letter-spacing:.14em;font-size:15px;color:var(--soft)}
.top .mark{color:var(--ink);font-size:18px;letter-spacing:.24em}
.stage{display:grid;grid-template-columns:minmax(300px,34%) 1fr;gap:0 24px;padding:8px 28px 0;height:min(78vh,820px);min-height:520px}
.text{align-self:center;padding-bottom:40px;max-width:440px}
.kicker{font-variant:small-caps;letter-spacing:.12em;color:var(--soft);margin:0 0 6px;font-size:16px}
h1{font-weight:500;font-style:italic;font-size:clamp(46px,6vw,84px);line-height:.95;margin:0 0 14px;letter-spacing:-.01em}
.data{font-size:22px;line-height:1.25;margin:0 0 6px}
.beaufort{font-variant:small-caps;letter-spacing:.1em;color:var(--red);margin:0 0 18px;font-size:16px}
.how{font-size:17px;line-height:1.42;color:#4a4339;margin:0 0 18px;border-top:1px solid var(--rule);padding-top:14px}
.gold{color:var(--gold)} .ink{color:var(--night)}
.controls{display:flex;gap:10px;flex-wrap:wrap}
.pill{font:inherit;font-size:16px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:99px;padding:7px 16px;cursor:pointer;letter-spacing:.02em}
.pill.ghost{background:transparent;color:var(--ink)}
.pill[aria-pressed=true]{background:transparent;color:var(--ink)}
.harp{position:relative;touch-action:none;min-height:0}
canvas{width:100%;height:100%;display:block;cursor:crosshair}
.hint{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-style:italic;color:var(--ink);font-size:15px;pointer-events:none;transition:opacity 1s;white-space:nowrap;background:rgba(241,235,223,.88);padding:2px 12px;border-radius:99px}
.atlas{padding:10px 28px 8px;border-top:1px solid var(--rule);margin:0 28px}
.atlas-title{font-variant:small-caps;letter-spacing:.12em;color:var(--soft);margin:12px 0 8px;font-size:15px}
#search{display:flex;gap:8px;max-width:520px;margin-top:10px}
#q{flex:1;font:inherit;font-size:18px;background:transparent;border:none;border-bottom:1px solid var(--ink);padding:6px 2px;color:var(--ink);outline:none;border-radius:0}
.results{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px 8px}
.chip{font:inherit;font-size:16px;background:transparent;border:1px solid var(--rule);border-radius:99px;padding:4px 12px;cursor:pointer;color:var(--ink)}
.chip b{font-weight:500;color:var(--soft);font-size:14px;margin-left:5px;font-variant-numeric:tabular-nums}
.chip.on{border-color:var(--ink);background:#e6dccb}
footer{margin:18px 28px 40px;font-size:15px;color:var(--soft);line-height:1.45;max-width:760px}
footer .sig{font-style:italic}
@media (max-width:760px){
  .top{padding:12px 16px 0;font-size:13px}
  .top .sub{font-size:12px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%;text-align:right}
  .top .mark{font-size:16px}
  /* phone fold: city name + wind line first, the harp right under them, the essay below */
  .stage{display:flex;flex-direction:column;height:auto;min-height:0;padding:0 16px}
  .text{display:contents}
  .kicker{order:1;margin:6px 0 2px;font-size:14px}
  h1{order:2;font-size:38px;margin:0 0 4px;line-height:.95}
  .data{order:3;font-size:17px;line-height:1.25;margin:0 0 2px}
  .harp{order:4;height:46vh;min-height:300px;max-height:460px}
  .beaufort{order:5;margin:8px 0 10px;font-size:14px}
  .how{order:6;font-size:16px;margin:0 0 14px}
  .controls{order:7;margin-bottom:6px}
  .hint{bottom:8px;font-size:14px}
  .atlas{margin:0 16px;padding:8px 0}
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .chip{flex:0 0 auto}
  footer{margin:14px 16px 40px}
}

@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.hint{animation:breathe 2.2s ease-in-out infinite}
#sound{position:relative}
body:not(.sounding) #sound::after{content:"";position:absolute;inset:-5px;border-radius:99px;border:1px solid var(--ink);animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
@media (max-width:760px){.top .sub .lead{display:none}}

.pack{margin-top:10px;font-size:14px;color:var(--soft)}
.pack a{color:var(--soft)}