/* Bosun marketing site. Layout, type and resting states.
   Everything here must look finished with motion.css absent. See DESIGN.md. */

@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* From bosun_ios Theme.swift */
  --navy-950: #071320;
  --navy-900: #0c1e33;
  --navy-800: #152c47;
  --navy-700: #223d5c;
  --navy-600: #335072;
  --navy-400: #6d87a8;
  --navy-200: #bccadd;
  --navy-100: #dfe6ef;
  --brass: #c6a35b;
  --brass-pale: #f1dfb0;
  --brass-600: #a5813a;
  --sand: #f9f7f2;
  --serious: #ec835a;
  --rust: #b4512c;

  --display: "Instrument Sans", -apple-system, sans-serif;
  --body: "Hanken Grotesk", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gauge: "Big Shoulders Display", "Arial Narrow", sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(96px, 14vw, 200px);
  --ease-swell: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
  accent-color: var(--brass);
  scrollbar-color: var(--navy-600) var(--navy-950);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy-950); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--navy-950); color: var(--navy-100); font: 400 clamp(17px, 1.15vw, 19px)/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
main { flex: 1; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--brass); color: var(--navy-950); }
:focus-visible { outline: 2px solid var(--brass-pale); outline-offset: 3px; }

/* Cursor: a compass needle, and a ship's wheel over anything you can use */
html { cursor: url("/assets/cursors/needle.png") 3 3, auto; cursor: image-set(url("/assets/cursors/needle.png") 1x, url("/assets/cursors/needle@2x.png") 2x) 3 3, auto; }
a, button, label { cursor: url("/assets/cursors/helm-0.png") 16 16, pointer; cursor: image-set(url("/assets/cursors/helm-0.png") 1x, url("/assets/cursors/helm-0@2x.png") 2x) 16 16, pointer; }
input[type="email"] { cursor: text; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 16px; background: var(--brass); color: var(--navy-950); }
.skip:focus { top: 12px; }

/* Type */
.display { font-family: var(--display); font-weight: 500; line-height: 1; letter-spacing: -.032em; color: var(--sand); }
.display em { font-style: normal; color: var(--brass); }
h1.display { font-size: clamp(50px, 7.7vw, 136px); }
h2.display { font-size: clamp(40px, 5.7vw, 90px); }
.label { font: 400 12.5px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--brass); }
.lead { max-width: 33em; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.45; color: var(--navy-200); }
.copy { max-width: 31em; color: var(--navy-200); }
.ln { display: block; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.ln > span { display: block; white-space: nowrap; }

/* Header */
.bar { position: absolute; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--gutter); view-transition-name: bar; }
.mark { display: inline-flex; align-items: center; gap: 11px; font: 600 23px/1 var(--display); letter-spacing: -.02em; color: var(--sand); text-decoration: none; }
.mark svg { width: 30px; height: 34px; fill: none; stroke: var(--brass); stroke-width: 3; stroke-linecap: round; }
.bar nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); font-size: 16px; }
.bar nav a { text-decoration: none; }
.invite { padding: 9px 15px; color: var(--brass-pale); border: 1px solid var(--brass-600); white-space: nowrap; }
.invite:hover { background: var(--brass); color: var(--navy-950); }

/* The one big action */
.plaque { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 19px 28px; border: 0; outline-offset: 5px; background: var(--brass); color: var(--navy-950); font: 600 18px/1 var(--body); text-decoration: none; overflow: clip; box-shadow: 0 0 0 1px var(--navy-950), 0 0 0 2px var(--brass); }
.plaque:hover { background: var(--brass-pale); }
.plaque i { font-style: normal; font-family: var(--mono); }
.quiet { color: var(--navy-100); text-decoration: none; border-bottom: 1px solid var(--navy-600); padding-bottom: 3px; }
.quiet:hover { color: var(--brass-pale); border-color: var(--brass); }

/* Device */
.phone { --w: clamp(250px, 25vw, 360px); position: relative; display: grid; width: var(--w); aspect-ratio: 393 / 852; padding: calc(var(--w) * .026); border-radius: calc(var(--w) * .155); background: #03070c; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 calc(var(--w) * .008) #4c627d, 0 calc(var(--w) * .18) calc(var(--w) * .28) calc(var(--w) * -.08) #01050abf; }
.phone > img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--w) * .13); background: #f2f2f7; }

/* Hero */
.hero { position: relative; min-height: max(100svh, 780px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 110px var(--gutter) 0; overflow: clip; isolation: isolate; background: var(--navy-900); }
.hero__photo { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__shade { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, #071320f2 0%, #071320c9 38%, #07132030 72%, #07132059 100%), linear-gradient(#07132099, transparent 26%); }
.hero__glitter { position: absolute; z-index: -2; inset: 58% 0 0; opacity: .32; mix-blend-mode: soft-light; background: repeating-linear-gradient(94deg, transparent 0 34px, #fff 58px, transparent 86px, transparent 130px); -webkit-mask: linear-gradient(transparent, #000 30% 80%, transparent); mask: linear-gradient(transparent, #000 30% 80%, transparent); }
.hero__fade { position: absolute; z-index: 3; inset: auto 0 0; height: 24vh; background: linear-gradient(transparent, var(--navy-950)); pointer-events: none; }
.hero__copy { position: relative; z-index: 4; padding-bottom: 12vh; }
.hero__copy .lead { margin: 30px 0 34px; color: var(--navy-100); }
.hero__copy .label { margin-bottom: 26px; }
.hero__do { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; }
.hero__phone { position: relative; z-index: 2; align-self: end; justify-self: center; margin-bottom: -24vh; perspective: 1400px; }
.hero__phone .phone { --w: clamp(250px, min(25vw, 42vh), 420px); transform: rotateY(-14deg) rotateZ(3deg); }

.compass { position: absolute; z-index: -1; display: block; top: -7vmax; right: -11vmax; width: 62vmax; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--brass) 0 .22deg, transparent .22deg 3deg), repeating-conic-gradient(from 0deg, var(--brass) 0 .45deg, transparent .45deg 15deg); -webkit-mask: radial-gradient(closest-side, transparent 93%, #000 93.4% 97.6%, transparent 98%); mask: radial-gradient(closest-side, transparent 93%, #000 93.4% 97.6%, transparent 98%); opacity: .3; }
.compass--in { inset: 2.5vmax -4vmax auto auto; width: 47vmax; opacity: .16; }

.sea { position: absolute; z-index: 3; inset: auto 0 0; height: 25vh; pointer-events: none; }
.wave { position: absolute; left: 0; bottom: -14%; width: 200%; height: 100%; -webkit-mask: url("/assets/wave.svg") 0 0 / 50% 100% repeat-x; mask: url("/assets/wave.svg") 0 0 / 50% 100% repeat-x; }
.wave--1 { height: 114%; background: linear-gradient(#1d3755, var(--navy-800)); }
.wave--2 { height: 88%; background: linear-gradient(var(--navy-700), var(--navy-900)); }
.wave--3 { height: 59%; background: linear-gradient(var(--navy-800), var(--navy-950) 62%); }

/* Moving rope of words */
.rope { position: relative; z-index: 2; display: grid; gap: 4px; padding: 30px 0; overflow: clip; background: var(--navy-950); }
.rope__track { display: flex; width: max-content; gap: 56px; padding-right: 56px; font: 500 clamp(28px, 4.2vw, 62px)/1.2 var(--display); letter-spacing: -.025em; white-space: nowrap; }
.rope__track span:nth-child(odd) { color: transparent; -webkit-text-stroke: 1px var(--navy-400); }
.rope__track span:nth-child(even) { color: var(--brass); }

/* Drawing-sheet details */
.sheet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 11px 0; border-block: 1px solid var(--navy-600); font: 400 12.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-200); }
.plate { position: relative; background: var(--sand); color: var(--navy-900); }
.plate .sheet { border-color: #0c1e3333; color: var(--navy-600); }
.plate .label { color: var(--brass-600); }
.plate .display { color: var(--navy-900); }
.plate .display em { color: var(--brass-600); }
.plate .copy { color: var(--navy-700); }

/* Intake */
.intake { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 80px) clamp(32px, 7vw, 100px); align-items: center; padding: clamp(56px, 7vw, 100px) var(--gutter) var(--section); }
.intake .sheet { grid-column: 1 / -1; }
.intake .display { margin: 20px 0 26px; }
.bench { position: relative; height: clamp(500px, 42vw, 620px); overflow: clip; border: 1px solid var(--navy-900); background: var(--navy-900); }
.paper { position: absolute; left: var(--x); top: var(--y); width: clamp(120px, 15vw, 182px); padding: 12px 13px 28px; background: var(--sand); color: var(--navy-900); font: 400 11px/1.3 var(--mono); transform: rotate(var(--r)); box-shadow: 0 16px 30px #0007; }
.paper b { display: block; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--navy-100); font-weight: 400; overflow-wrap: anywhere; }
.paper::after { content: ""; display: block; height: 28px; background: repeating-linear-gradient(var(--navy-100) 0 3px, transparent 3px 8px); }
.paper:nth-child(1) { --x: 7%; --y: 6%; --r: -8deg; }
.paper:nth-child(2) { --x: 51%; --y: 3%; --r: 7deg; }
.paper:nth-child(3) { --x: 30%; --y: 15%; --r: -3deg; }
.paper:nth-child(4) { --x: 62%; --y: 26%; --r: 12deg; }
.paper:nth-child(5) { --x: 8%; --y: 28%; --r: 5deg; }
.slot { position: absolute; z-index: 3; left: 6%; right: 6%; top: 53%; height: 4px; background: var(--brass); box-shadow: 0 0 26px var(--brass); }
.recs { position: absolute; z-index: 2; left: 6%; right: 6%; top: calc(53% + 22px); display: grid; gap: 9px; }
.rec { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-left: 2px solid var(--brass); background: var(--navy-800); color: var(--navy-100); font: 400 13px/1.3 var(--mono); }
.rec b { font-weight: 400; color: var(--brass-pale); }

/* Tour: text scrolls past a phone */
.walk { display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(40px, 5vw, 70px) var(--gutter) 0; }
.walk > .sheet { grid-column: 1 / -1; }
.walk__phone { display: none; }
.step { display: grid; gap: 24px; align-content: center; padding: clamp(50px, 8vw, 96px) 0; }
.step .phone { margin-top: 12px; }
.step h3 { max-width: 12em; font: 500 clamp(32px, 4.2vw, 62px)/1.05 var(--display); letter-spacing: -.03em; color: var(--sand); }
.step .label { display: block; }

/* Discrepancy: the one light section, built like an engine hour meter */
.disagree { position: relative; overflow: clip; padding: calc(var(--section) + 7vw) var(--gutter); background: var(--sand); color: var(--navy-900); clip-path: polygon(0 0, 100% 7vw, 100% 100%, 0 calc(100% - 7vw)); margin-block: clamp(60px, 7vw, 110px); }
.disagree .label { color: var(--brass-600); }
.disagree .display { max-width: 11em; margin: 18px 0 clamp(40px, 6vw, 76px); color: var(--navy-900); }
.disagree .display em { color: var(--rust); }
.gauges { border-top: 2px solid var(--navy-900); }
.gauges__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; padding: 12px 0; font: 400 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--navy-600); }
.reading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px clamp(24px, 5vw, 72px); align-items: center; padding: clamp(18px, 2.4vw, 30px) 0; border-top: 1px solid #0c1e3326; }
.meter { --cell: clamp(58px, 8.4vw, 124px); display: flex; align-items: flex-end; gap: 4px; }
.meter__h { margin-left: 10px; font: 700 calc(var(--cell) * .5)/1 var(--gauge); text-transform: uppercase; color: var(--navy-600); }
.reel { position: relative; display: block; width: var(--cell); height: calc(var(--cell) * 1.42); overflow: clip; border-radius: 3px; background: linear-gradient(#050d17, var(--navy-800) 26% 74%, #050d17); }
.reel b { display: block; font: 700 calc(var(--cell) * 1.16)/calc(var(--cell) * 1.42) var(--gauge); text-align: center; color: var(--sand); white-space: pre-line; transform: translateY(calc(var(--cell) * -1.42 * var(--d))); }
.d0 { --d: 0; } .d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; } .d5 { --d: 5; } .d6 { --d: 6; } .d8 { --d: 8; }
.reading__src strong { display: block; font: 600 clamp(24px, 2.6vw, 38px)/1.08 var(--display); letter-spacing: -.025em; }
.reading__src span { display: block; margin-top: 6px; font: 400 13.5px/1.45 var(--mono); color: var(--navy-600); }
.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px clamp(24px, 5vw, 72px); align-items: center; padding: clamp(20px, 2.6vw, 34px) 0; border-block: 2px solid var(--navy-900); }
.verdict__gap { font: 800 clamp(58px, 8.4vw, 132px)/.9 var(--gauge); color: var(--rust); white-space: nowrap; }
.verdict p { max-width: 30em; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.32; color: var(--navy-900); }
.disagree .copy { margin-top: clamp(26px, 3.4vw, 44px); color: var(--navy-700); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Invite band */
.band { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; min-height: 74vh; padding: var(--section) var(--gutter); overflow: clip; isolation: isolate; }
.band__photo { position: absolute; z-index: -2; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; object-position: 50% 92%; }
.band::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(var(--navy-950), #071320b3 34%, #071320d9); }
.join { display: grid; gap: 12px; }
.join__row { display: flex; gap: 0; border: 1px solid var(--brass-600); background: var(--navy-950); }
.join input[type="email"] { flex: 1; min-width: 0; padding: 18px; border: 0; background: transparent; color: var(--sand); font: 400 18px/1.2 var(--body); caret-color: var(--brass); }
.join input[type="email"]::placeholder { color: var(--navy-400); }
.join input[type="email"]:focus { outline: none; }
.join__row:focus-within { outline: 2px solid var(--brass-pale); outline-offset: 2px; }
.join .plaque { box-shadow: none; flex: none; }
.join__note { font-size: 14.5px; color: var(--navy-200); }
.join__err { display: none; font-size: 15px; color: var(--serious); }
.join:has(input:user-invalid) .join__err { display: block; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer: the title block of a chart */
.foot { position: relative; padding: 0 var(--gutter) 26px; background: var(--navy-950); overflow: clip; }
.foot__water { position: relative; height: 64px; margin-inline: calc(var(--gutter) * -1); border-bottom: 1px solid var(--navy-600); }
.foot__ship { position: absolute; left: 12%; bottom: -1px; width: 92px; }
.foot__ship svg { display: block; width: 100%; fill: var(--brass); transform-origin: 50% 100%; }
.foot__ship::before { content: ""; position: absolute; right: 94%; bottom: 0; width: 34vw; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-pale)); }
.foot__block { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--navy-700); }
.foot__cell { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 34px); border-left: 1px solid var(--navy-700); }
.foot__cell:first-child { padding-left: 0; border-left: 0; }
.foot__cell p { color: var(--navy-100); font-size: 17px; line-height: 1.35; }
.foot__cell--name p { max-width: 15em; font: 500 clamp(21px, 1.9vw, 29px)/1.15 var(--display); letter-spacing: -.02em; color: var(--brass); }
.foot__cell--name .mark svg { width: 26px; height: 30px; }
.foot__cell a:not(.mark) { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--navy-700); color: var(--navy-100); font-size: 17px; text-decoration: none; }
.foot__cell a:not(.mark):hover { color: var(--brass-pale); border-color: var(--brass); }
.foot__cell a i { font-style: normal; font-family: var(--mono); color: var(--brass); }

/* Touch screens: every link at least 44px tall to the finger, without changing how it looks */
@media (pointer: coarse) {
  .mark { min-height: 44px; }
  .quiet { padding-top: 14px; }
  .foot__cell a:not(.mark) { min-height: 44px; align-items: flex-end; }
}
.foot__small { padding-top: 16px; font: 400 12.5px/1.5 var(--mono); color: var(--navy-400); }

/* The app page */
.screens { padding: clamp(60px, 7vw, 100px) var(--gutter) 0; }
.screens__head { padding-top: clamp(40px, 5vw, 70px); }
.screens__head .display { max-width: 12em; }
.screens__head .lead { margin-top: 22px; }
.gallery { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 7vw, 110px); padding: clamp(50px, 6vw, 80px) 0 var(--section); }
.gallery input { position: absolute; opacity: 0; pointer-events: none; }
.tabsw { display: grid; align-content: start; }
.tabsw label { display: grid; gap: 4px; padding: 20px 0 20px 22px; border-top: 1px solid var(--navy-800); border-left: 2px solid transparent; }
.tabsw strong { font: 500 clamp(25px, 2.9vw, 42px)/1.12 var(--display); letter-spacing: -.028em; color: var(--navy-400); }
.tabsw span { display: none; max-width: 34em; color: var(--navy-200); }
.tabsw label:hover strong { color: var(--navy-100); }
#s1:checked ~ .tabsw [for="s1"], #s2:checked ~ .tabsw [for="s2"], #s3:checked ~ .tabsw [for="s3"], #s4:checked ~ .tabsw [for="s4"], #s5:checked ~ .tabsw [for="s5"], #s6:checked ~ .tabsw [for="s6"] { border-left-color: var(--brass); }
#s1:checked ~ .tabsw [for="s1"] strong, #s2:checked ~ .tabsw [for="s2"] strong, #s3:checked ~ .tabsw [for="s3"] strong, #s4:checked ~ .tabsw [for="s4"] strong, #s5:checked ~ .tabsw [for="s5"] strong, #s6:checked ~ .tabsw [for="s6"] strong { color: var(--brass); }
#s1:checked ~ .tabsw [for="s1"] span, #s2:checked ~ .tabsw [for="s2"] span, #s3:checked ~ .tabsw [for="s3"] span, #s4:checked ~ .tabsw [for="s4"] span, #s5:checked ~ .tabsw [for="s5"] span, #s6:checked ~ .tabsw [for="s6"] span { display: block; }
#s1:focus-visible ~ .tabsw [for="s1"], #s2:focus-visible ~ .tabsw [for="s2"], #s3:focus-visible ~ .tabsw [for="s3"], #s4:focus-visible ~ .tabsw [for="s4"], #s5:focus-visible ~ .tabsw [for="s5"], #s6:focus-visible ~ .tabsw [for="s6"] { outline: 2px solid var(--brass-pale); outline-offset: -2px; }
.gallery__phone { position: sticky; top: 40px; align-self: start; perspective: 1400px; }
.gallery__phone .phone { --w: clamp(260px, 28vw, 410px); }
.shot { opacity: 0; }
#s1:checked ~ .gallery__phone .shot--1, #s2:checked ~ .gallery__phone .shot--2, #s3:checked ~ .gallery__phone .shot--3, #s4:checked ~ .gallery__phone .shot--4, #s5:checked ~ .gallery__phone .shot--5, #s6:checked ~ .gallery__phone .shot--6 { opacity: 1; }


/* Short pages */
.short { position: relative; display: grid; align-content: center; min-height: 100svh; padding: 130px var(--gutter) 0; overflow: clip; isolation: isolate; background: radial-gradient(70% 60% at 76% 34%, var(--navy-700), transparent 70%), linear-gradient(var(--navy-950), var(--navy-900)); }
.short__in { position: relative; z-index: 2; padding-bottom: 24vh; }
.short .display { max-width: 11em; margin: 18px 0 24px; }
.short .lead + .plaque, .short .lead + .quiet { display: inline-flex; margin-top: 30px; }
.short--wait { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(32px, 7vw, 100px); align-items: center; }
.short--wait .join { margin-top: 34px; max-width: 560px; }
.log { position: relative; z-index: 2; margin-bottom: 24vh; border-top: 1px solid var(--navy-700); }
.log li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--navy-700); }
.log .label { padding-top: 5px; }
.log b { display: block; font-weight: 600; color: var(--sand); }
.log p { font-size: 16.5px; color: var(--navy-200); }
.short .sea { height: 22vh; }
body:has(.short--wait) .sea { transition: height .9s var(--ease-swell); }
body:has(.short--wait .join input:focus) .sea { height: 34vh; }

.sailor { position: absolute; z-index: 2; left: 0; bottom: 18vh; width: clamp(84px, 11vw, 150px); fill: var(--brass); }
.flares { position: absolute; z-index: 1; top: 30%; right: 22%; width: 2px; height: 2px; }
.flares i { position: absolute; display: block; width: 3px; height: 72px; background: linear-gradient(transparent, var(--brass-pale)); transform: rotate(var(--a)) translateY(-120px); opacity: .5; }
.flares i:nth-child(1) { --a: 0deg; }
.flares i:nth-child(2) { --a: 45deg; }
.flares i:nth-child(3) { --a: 90deg; }
.flares i:nth-child(4) { --a: 135deg; }
.flares i:nth-child(5) { --a: 180deg; }
.flares i:nth-child(6) { --a: 225deg; }
.flares i:nth-child(7) { --a: 270deg; }
.flares i:nth-child(8) { --a: 315deg; }
.beam { position: absolute; z-index: -1; top: 34%; right: 18%; width: 150vmax; aspect-ratio: 1; translate: 50% -50%; background: conic-gradient(from 90deg, transparent 0 8deg, #f1dfb03b 16deg, transparent 26deg 360deg); }
.lamp { position: absolute; z-index: 1; top: 34%; right: 18%; width: 16px; height: 16px; translate: 50% -50%; border-radius: 50%; background: var(--brass-pale); box-shadow: 0 0 40px 10px var(--brass); }

/* Narrow screens */
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 112px; min-height: 0; }
  .hero__copy { padding-bottom: 0; }
  .hero__phone { margin: 36px 0 -26vw; justify-self: center; }
  .hero__phone .phone { --w: min(70vw, 340px); }
  .hero__shade { background: linear-gradient(#071320f0 0%, #071320cc 58%, #07132066 100%); }
  .hero__fade { height: 110px; }
  .sea { height: 150px; }
  .compass { width: 110vmax; right: -60vmax; top: -6vmax; }
  .compass--in { width: 84vmax; right: -46vmax; }
  .intake, .band, .gallery, .short--wait { grid-template-columns: minmax(0, 1fr); }
  .bench { height: 540px; }
  .step .phone { --w: min(70vw, 320px); justify-self: center; }
  .reading, .verdict { grid-template-columns: minmax(0, 1fr); }
  .meter { --cell: clamp(46px, 16vw, 92px); }
  .foot__block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__cell--name { grid-column: 1 / -1; padding-left: 0; }
  .foot__cell:nth-child(2) { padding-left: 0; border-left: 0; }
  .foot__cell:nth-child(n + 2) { border-top: 1px solid var(--navy-700); }
  .foot__cell:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .band { min-height: 0; }
  .join__row { flex-direction: column; }
  .join .plaque { justify-content: center; }
  .gallery { padding-top: 40px; }
  .gallery__phone { position: static; justify-self: center; grid-row: 2; }
  .gallery__phone .phone { --w: min(72vw, 330px); }
  .tabsw { grid-row: 1; }
  .tabsw label { padding: 15px 0 15px 16px; }
  .log { margin-bottom: 30vh; }
  .short__in { padding-bottom: 8vh; }
  .short--wait { align-content: start; }
  .short--wait .short__in { padding-bottom: 36px; }
}