/* The first-screen request keeps the original field order and server values. */
.craft-field {border:0;margin:0;padding:0;min-width:0}
@media (max-width: 380px) and (max-height: 620px) {
  .request .fields .contact-field {grid-column: auto; min-width: 0}
}
.craft-field legend {padding:0;font-size:12px;font-weight:700;line-height:1.25}
.craft-switch {display:grid;grid-template-columns:1fr 1fr;gap:3px;min-height:40px;margin-top:4px;padding:3px;border:1px solid #a9bfc3;border-radius:7px;background:#f2f7f6}
.craft-choice {position:relative;cursor:pointer}
.craft-choice input[type="radio"] {position:absolute;inset:0;opacity:0;margin:0;padding:0;width:100%;height:100%;min-height:0;cursor:pointer}
.craft-choice>span {display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 1px;height:100%;min-height:30px;color:#284957;background:white;border:1px solid #d1dedd;border-radius:4px;transition:background .16s,color .16s}
.craft-choice svg {width:23px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.craft-choice b {font-size:12px;white-space:nowrap}
.craft-choice input:checked+span {background:#103d49;color:#c0f4e7;border-color:#103d49}
.craft-choice input:focus-visible+span {outline:2px solid #087e76;outline-offset:1px}
.craft-choice:hover input:not(:checked)+span {background:#e4f3ee}
.craft-choice input:disabled {cursor:default}
.fields .form-city select {border-radius:7px;background-color:#f3f8f7;font-weight:600;color:#184b4d}
@supports (appearance:base-select) {
  .form-city select,.form-city select::picker(select) {appearance:base-select}
  .fields .form-city select {display:flex;align-items:center;justify-content:space-between}
  .form-city select::picker-icon {color:#197366;transition:rotate .18s}
  .form-city select:open::picker-icon {rotate:180deg}
  .form-city select::picker(select) {border:1px solid #aac5be;border-radius:9px;padding:4px;margin-top:4px;background:white;color:#143d44;box-shadow:0 8px 25px #08273333}
  .form-city option {min-height:38px;padding:7px 10px;gap:7px;border-radius:5px;font-size:14px;font-weight:500;cursor:pointer}
  .form-city option:is(:hover,:focus-visible) {background:#e4f3ef}
  .form-city option:checked {background:#d6ede6;color:#12473f;font-weight:700}
  .form-city option:disabled {display:none}
  .form-city option::checkmark {order:1;margin-left:auto;color:#17675f}
}
.album-jumps {display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.album-jumps button {min-height:38px;border:1px solid #50717a;border-radius:30px;background:transparent;color:#e6eeee;padding:5px 11px;font-size:13px;font-weight:600}
.album-jumps button b {color:#a6d8d0;font-weight:600;font-size:11px;padding-inline-start:3px}
.album-jumps button[aria-pressed=true] {background:var(--aqua);color:var(--night);border-color:var(--aqua)}
.album-jumps button[aria-pressed=true] b {color:#245c56}
.album-jumps button:hover {border-color:var(--aqua)}
.journal .thumbnails {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-top:15px}
.journal .thumbnails button {width:100%;padding:2px}
.journal .thumbnails img {width:100%;aspect-ratio:1.65;height:auto}
.reel-copy small {font-style:normal;color:#c6e4dc}
.coast-area {
  background: #0b2633;
  color: white;
}
.chart-layout {
  display: grid;
  grid-template-columns: 30% 13% 57%;
  align-items: center;
}
.chart-copy {
  grid-column: 1 / 3;
  grid-row: 1;
  position: relative;
  z-index: 2;
  margin-left: max(var(--pad), calc((100vw - 1440px) / 2 + var(--pad)));
  padding: clamp(38px, 4vw, 80px) 20px clamp(38px, 4vw, 80px) 0;
}
.chart-copy h2 {
  font-size: clamp(56px, 5.7vw, 94px);
  line-height: .94;
}
.chart-copy h2 em {display: block; color: var(--aqua)}
.chart-copy > p:not(.eyebrow) {
  margin: 18px 0 20px;
  color: #d3e5e8;
  max-width: 35ch;
}
.chart-cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 340px;
  column-gap: 20px;
}
.chart-cities button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  min-height: 44px;
  text-align: left;
  background: transparent;
  border-bottom: 1px solid #3b535c;
  color: #e4eded;
  font-weight: 600;
  font-size: 15px;
}
.chart-cities button:hover, .chart-cities button[aria-pressed=true] {color: var(--aqua)}
.place-tick {
  width: 8px;
  height: 8px;
  flex: none;
  border: 1px solid #9cbbc3;
  border-radius: 50%;
}
[aria-pressed=true] > .place-tick {background: #ff901e; border-color: #ff901e}
.chart-request {
  margin-top: 22px;
  justify-content: flex-start;
  gap: .3em;
  min-height: 44px;
  border-radius: 0;
  border-bottom: 1px solid #8ad0c8;
  background: transparent;
  color: white;
  padding: 7px 0;
}
.chart-request strong {margin-left: 8px; color: var(--aqua)}
.chart-request:hover {background: transparent; box-shadow: none; color: var(--aqua)}
.chart-frame {
  position: relative;
  grid-row: 1;
  grid-column: 2 / 4;
  min-width: 0;
}
.chart-surface {
  --offshore-fade: radial-gradient(ellipse 50% 86% at 0 100%, #0b2633 53%, rgba(11,38,51,.94) 67%, transparent 100%);
  position: relative;
  isolation: isolate;
}
.chart-surface img {
  width: 100%;
  height: auto;
  filter: brightness(1.14) saturate(1.12);
}
.chart-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--offshore-fade),
              linear-gradient(90deg, #0b2633, rgba(11,38,51,.85) 8%, rgba(11,38,51,.4) 21%, transparent 40%),
              linear-gradient(0deg, rgba(6,25,33,.5), transparent 16%);
}
.map-pin {
  --pin-size: 13px;
  position: absolute;
  z-index: 1;
  top: var(--y);
  left: var(--x);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  transform: translate(calc(-.5 * var(--pin-size)), -50%);
  background: transparent;
  color: white;
  white-space: nowrap;
}
.map-pin.left-pin {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + .5 * var(--pin-size)), -50%);
}
.map-pin i {
  width: var(--pin-size);
  height: var(--pin-size);
  border-radius: 50%;
  border: 2px solid white;
  background: #237b79;
  box-shadow: 0 0 0 3px #0b263378;
}
.map-pin b {
  padding: 4px 8px;
  border-radius: 4px;
  background: #0a222fe6;
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.35;
  font-weight: 650;
}
.map-pin[aria-pressed=true] i {background: #ff850d; box-shadow: 0 0 0 4px #fc913752}
.map-pin[aria-pressed=true] b {background: #fff5e7; color: #18333b}
.map-pin:hover b {outline: 1px solid white}
.map-pin:focus-visible, .chart-cities button:focus-visible, .chart-request:focus-visible {outline-color: #b8fff0}
.imagery-credit {
  position: absolute;
  right: 6px;
  bottom: 4px;
  padding: 2px 6px;
  max-width: calc(100% - 12px);
  background: #091c25d9;
  color: #d6e0e1;
  font-size: 10px;
  line-height: 1.35;
}
.imagery-credit a {text-decoration: underline; text-underline-offset: 2px}
@media(max-width:950px) {
  .craft-choice svg {width:19px}.craft-choice>span{gap:2px}
}
@media(max-width:860px) {
  .chart-layout {grid-template-columns: 1fr}
  .chart-copy {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 36px var(--pad) 12px;
  }
  .chart-copy h2 {font-size: clamp(45px, 8.4vw, 62px)}
  .chart-copy h2 em {display: inline}
  .chart-copy > p:not(.eyebrow) {margin: 12px 0}
  .chart-cities {max-width: 420px}
  .chart-request {margin-top: 12px}
  .chart-frame {grid-column: 1; grid-row: 2}
  .chart-surface::after {
    background: var(--offshore-fade),
                linear-gradient(180deg, #0b2633, transparent 16%),
                linear-gradient(0deg, rgba(6,25,33,.5), transparent 15%);
  }
}
@media(max-width:760px) {
  .album-jumps {gap:5px}
  .album-jumps button {min-height:34px;padding-inline:9px;font-size:12px}
  .journal .thumbnails {grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .journal .thumbnails button {padding:1px}
  .map-pin {--pin-size: 10px; gap: 3px}
  .map-pin b {font-size: 12px; padding: 3px 5px}
  .craft-switch {min-height:39px;margin-top:3px}
  .imagery-credit {position: static; display: block; max-width: none; padding: 5px var(--pad)}
}
@media(max-width:380px) {
  .craft-switch {gap:2px;padding:2px}
  .craft-choice svg {width:16px}
  .craft-choice b {font-size:11px}
}