/* A quiet chart and a compact reading column, with shared alignment and native typography. */ @property --reader-shift { syntax: ""; inherits: false; initial-value: 0px; } :root { --sea: #29494b; --sea-deep: #203a3c; --sea-line: rgba(220, 224, 211, 0.12); --land: #c6c8b8; --coast: #8e9b90; --brass: #c0b89a; --track: #d4c193; --accent: #305e5f; --ivory: #eff0e8; --ivory-dim: rgba(239, 240, 232, 0.76); --paper: #f7f6f2; --paper-2: #efeee8; --paper-edge: #deded6; --ink: #253234; --ink-soft: #626b6c; /* 4.7:1 on --paper-2, so the small secondary text passes WCAG AA (#687172 was 4.3) */ --ink-faint: rgba(37, 50, 52, 0.16); --ink-line: rgba(37, 50, 52, 0.3); --edge: #939d98; --hover: rgba(41, 73, 75, 0.055); --rule: rgba(37, 50, 52, 0.10); --body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --display: var(--body); --side-w: clamp(320px, 29vw, 380px); --header-h: 42px; --gutter: 20px; --time-h: 52px; --player-h: calc(var(--time-h) + env(safe-area-inset-bottom, 0px)); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; height: 100%; } /* The viewport holds the chart and controls; the reading panel owns its scroll. */ html { overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); grid-template-rows: var(--header-h) auto minmax(0, 1fr) var(--player-h); height: 100dvh; overflow: hidden; overflow: clip; /* where supported: not even a script can scroll it */ background: var(--sea-deep); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.4; } /* The chart handles pinch zoom; gestures over the surrounding UI only scroll it. */ :is(body, .side-head, .side-body, .key, .maplibregl-popup-content, .transcription-dialog) { touch-action: pan-x pan-y; } body[data-mode="index"] { --player-h: 0px; } .app-header { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 20px; min-width: 0; padding: 0 var(--bar-pad); background: var(--paper); box-shadow: inset 0 -1px var(--rule-ink), var(--neatline-bottom); /* ruled off from the chart as the panels are */ color: var(--ink); z-index: 5; --bar-pad: var(--gutter); } .app-start { display: flex; align-items: center; gap: 20px; min-width: 0; height: 100%; } .app-brand { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 15px; font-weight: 650; line-height: 1; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .app-brand img { display: block; flex: none; } .app-nav { display: flex; align-items: center; height: 100%; } .app-nav a, .app-about { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 5px 12px; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; } .app-nav a + a::after, .app-about::after { content: ""; position: absolute; left: 0; top: calc(50% - 9px); height: 18px; border-left: 1px solid var(--ink-faint); } :is(.app-nav, .app-menu) a[aria-current="page"] { color: var(--accent); font-weight: 650; } .app-end { display: flex; align-items: center; height: 100%; margin-left: auto; } .app-about { padding-inline: 12px 0; } :is(.app-nav, .app-menu) a:hover, .app-about:hover { color: var(--ink); } .app-header :focus-visible { outline-color: var(--accent); } /* Where the bar has no room for its links and About, a button in their place opens them as a card under it, framed as the others are (shown below, where it is wanted). */ .menu-btn { display: none; align-items: center; justify-content: center; width: 40px; min-height: 40px; margin-right: -11px; padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; } .menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; } .menu-btn[aria-expanded="true"] { color: var(--accent); } .menu-btn[aria-expanded="true"] .icon-menu, .menu-btn[aria-expanded="false"] .icon-close { display: none; } .app-menu { position: absolute; top: calc(var(--header-h) + 10px); right: calc(var(--bar-pad) + 5.5px); z-index: 6; display: none; flex-direction: column; min-width: 188px; padding: 2px 0; background: var(--paper); border: 1px solid var(--rule-ink); box-shadow: var(--neatline), 0 4px 18px rgba(0, 0, 0, 0.22); --menu-from: 0 -6px; opacity: 0; translate: var(--menu-from); transition: opacity var(--motion-ui) var(--motion-ease), translate var(--motion-ui) var(--motion-ease), display var(--motion-ui) allow-discrete; } .app-header.menu-open .app-menu { display: flex; opacity: 1; translate: none; } @starting-style { .app-header.menu-open .app-menu { opacity: 0; translate: var(--menu-from); } } .app-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap; } .app-menu a + a { border-top: 1px solid var(--paper-edge); } button { font: inherit; color: inherit; } a { color: inherit; } :focus-visible { outline: 2px solid var(--track); outline-offset: 2px; } .side :focus-visible, .voyage-summary :focus-visible, .mv-pop :focus-visible, .transcription-dialog :focus-visible { outline-color: var(--accent); } .maplibregl-canvas:focus-visible { outline-offset: -3px; } /* inside: the map clips what lies beyond it */ h1[tabindex="-1"]:focus { outline: none; } /* a new view's heading takes the focus (app.js: land), not a control */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read out, not shown */ html { -webkit-tap-highlight-color: transparent; } /* a tap shows the control's own :active, not the browser's grey or blue box */ /* ---------- arriving (index.html, .veil): the sea alone until the chart and its panel are drawn, so they appear together rather than piece by piece (app.js, reveal), with the mark riding the swell if that takes a moment. Should the script never come, the veil lifts by itself and the page's text shows ---------- */ .veil { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--sea-deep); pointer-events: none; animation: veil-lift var(--motion-ui) var(--motion-ease) 8s forwards; } .veil-mark { width: 56px; height: 56px; background: url("/favicon.svg") center / contain no-repeat; animation: mark-in var(--motion-ui) var(--motion-ease) 0.6s backwards, mark-ride 1.8s ease-in-out 0.6s infinite alternate; } @keyframes veil-lift { to { opacity: 0; visibility: hidden; } } @keyframes mark-in { from { opacity: 0; } } @keyframes mark-ride { from { transform: translateY(-2px) rotate(-3deg); } to { transform: translateY(2px) rotate(3deg); } } body.arriving :is(.side, .time, .corner, .app-header) { transition: none !important; } /* what the first page sets is simply there */ /* ---------- the persistent sidebar and reading panel ---------- */ /* A loading voyage gets a fine brass-toned line along the panel's top edge. */ .side::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 35%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity var(--motion-ui) var(--motion-ease); pointer-events: none; } body.loading .side::before { opacity: 1; animation: under-sail 1.1s ease-in-out infinite; } body.loading { cursor: progress; } @keyframes under-sail { from { transform: translateX(-100%); } to { transform: translateX(286%); } } .side { grid-column: 2; grid-row: 3; position: relative; width: var(--side-w); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--paper); border-left: 1px solid var(--paper-edge); overflow: hidden; z-index: 3; } .side-head { position: relative; flex: none; max-height: 70%; overflow-y: auto; padding: 12px var(--gutter) 10px; border-bottom: 1px solid var(--paper-edge); scrollbar-width: thin; } .side-head:empty { display: none; } /* before the script draws it, or when the map could not start */ .side-body { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior-y: contain; scrollbar-width: thin; } body[data-mode="index"]:not(.home) .side { --gutter: 16px; } /* Keep the title, search, and selected filters still; only the open filter list scrolls. */ .side-head:has(.filter-disclosure) { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: 75%; padding-block: 14px 12px; overflow: hidden; } /* A voyage's title is in the top bar, on one line: the vessel, her years and port, and a badge with her catch so far (.catch). From 800px wide it is centred in the bar between the links and About (from 1260px between flourishes, below; at 800-899px, the links are a menu); on a narrower screen it is a quiet row under them. */ body[data-mode="voyage"] .app-header { grid-row: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--header-h) auto; row-gap: 0; } .voyage-summary { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-inline: calc(-1 * var(--bar-pad)); padding: 8px var(--gutter); max-height: none; overflow: visible; background: var(--paper-2); border: 0; border-top: 1px solid var(--paper-edge); } .voyage-summary .catch { align-self: center; margin-left: auto; } @media (min-width: 800px) { body[data-mode="voyage"] .app-header { grid-template-columns: max-content minmax(0, 1fr) max-content; grid-template-rows: var(--header-h); } .voyage-summary { grid-column: 2; grid-row: 1; align-self: center; align-items: center; justify-content: center; flex-wrap: nowrap; min-width: 0; margin: 0; padding: 0; background: none; border: 0; } .voyage-summary .vessel { flex: none; white-space: nowrap; } .voyage-summary .vessel-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* only a name longer than any yet */ .voyage-summary .catch { margin-left: 4px; } .voyage-summary .vessel-meta { flex: 0 1 auto; } } /* Where the bar is short of room, the logo stands for the site's name, as on a phone, and the badge says less: the words it leaves out are still read out. */ @media (min-width: 800px) and (max-width: 999px) { body[data-mode="voyage"] .app-brand span { display: none; } } @media (max-width: 1000px) { .catch-verb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } @media (max-width: 600px) { .catch-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } @media (max-width: 359px) { /* the badge beside her name, her years and port under them */ .voyage-summary .catch { order: 1; } .voyage-summary .vessel-meta { order: 2; flex-basis: 100%; } } /* The top bar's empty stretch carries a penman's flourish, in the hand the logbooks were kept in: a line that sweeps into a long loop at each end, with two ovals crossed in a figure of eight at its middle, shaded as a pointed pen shades, thick where the stroke runs down and a hairline where it rises (each piece drawn from its centreline). On a voyage, the title takes the middle's place, a flourish either side ending in a dot. From 740px wide; on a narrower screen the links fill the bar. */ :root { --fl-end-r: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26'%3E%3Cpath fill='%2353605f' d='M-0.00 13.25L0.18 13.26L0.38 13.26L0.60 13.26L0.83 13.26L1.08 13.26L1.34 13.26L1.62 13.26L1.90 13.26L2.20 13.26L2.52 13.26L2.84 13.26L3.17 13.26L3.51 13.27L3.86 13.27L4.22 13.27L4.59 13.27L4.97 13.27L5.35 13.27L5.73 13.27L6.12 13.28L6.52 13.28L6.92 13.28L7.32 13.29L7.73 13.29L8.13 13.30L8.54 13.30L8.95 13.31L9.35 13.32L9.76 13.32L10.17 13.33L10.57 13.34L10.97 13.35L11.37 13.36L11.76 13.38L12.15 13.39L12.53 13.40L12.90 13.42L13.27 13.44L13.63 13.46L13.99 13.47L14.34 13.49L14.69 13.51L15.04 13.53L15.40 13.55L15.75 13.56L16.10 13.58L16.46 13.60L16.82 13.62L17.17 13.64L17.53 13.66L17.89 13.68L18.25 13.70L18.60 13.73L18.96 13.75L19.32 13.77L19.68 13.80L20.03 13.82L20.39 13.85L20.75 13.88L21.10 13.90L21.46 13.93L21.81 13.96L22.17 14.00L22.52 14.03L22.87 14.06L23.22 14.10L23.57 14.14L23.91 14.17L24.26 14.21L24.60 14.26L24.95 14.30L25.29 14.34L25.63 14.39L25.96 14.44L26.30 14.49L26.63 14.54L26.96 14.59L27.29 14.65L27.62 14.71L27.94 14.77L28.26 14.83L28.58 14.89L28.90 14.96L29.21 15.03L29.53 15.10L29.84 15.17L30.16 15.24L30.47 15.31L30.78 15.39L31.09 15.47L31.40 15.54L31.70 15.62L32.01 15.71L32.32 15.79L32.62 15.87L32.92 15.95L33.22 16.04L33.52 16.12L33.82 16.21L34.12 16.30L34.42 16.39L34.71 16.47L35.01 16.56L35.30 16.65L35.59 16.74L35.88 16.83L36.17 16.92L36.46 17.01L36.75 17.10L37.04 17.20L37.32 17.29L37.61 17.38L37.89 17.47L38.17 17.56L38.45 17.65L38.73 17.74L39.01 17.83L39.29 17.91L39.57 18.00L39.84 18.09L40.11 18.19L40.38 18.29L40.64 18.39L40.91 18.49L41.17 18.59L41.43 18.69L41.69 18.80L41.95 18.90L42.21 19.01L42.47 19.12L42.73 19.23L42.99 19.33L43.24 19.44L43.50 19.55L43.75 19.66L44.00 19.77L44.26 19.87L44.51 19.98L44.76 20.09L45.01 20.19L45.26 20.30L45.51 20.40L45.76 20.50L46.01 20.60L46.25 20.70L46.50 20.80L46.75 20.89L46.99 20.98L47.24 21.07L47.48 21.16L47.72 21.24L47.96 21.33L48.21 21.41L48.45 21.48L48.69 21.55L48.93 21.62L49.16 21.69L49.40 21.75L49.64 21.81L49.87 21.86L50.10 21.92L50.32 21.98L50.55 22.04L50.77 22.10L50.99 22.16L51.22 22.22L51.44 22.27L51.66 22.33L51.88 22.38L52.10 22.43L52.32 22.48L52.54 22.53L52.75 22.58L52.97 22.62L53.19 22.66L53.40 22.70L53.61 22.74L53.82 22.78L54.03 22.81L54.24 22.84L54.45 22.87L54.66 22.89L54.86 22.91L55.07 22.93L55.27 22.94L55.47 22.96L55.66 22.96L55.86 22.97L56.05 22.97L56.25 22.97L56.43 22.97L56.62 22.96L56.81 22.96L56.99 22.95L57.17 22.95L57.35 22.94L57.53 22.92L57.70 22.90L57.87 22.87L58.04 22.85L58.21 22.81L58.38 22.78L58.54 22.74L58.71 22.70L58.87 22.65L59.03 22.61L59.19 22.56L59.35 22.50L59.51 22.44L59.67 22.38L59.83 22.32L59.98 22.26L60.13 22.19L60.28 22.11L60.43 22.04L60.58 21.96L60.72 21.88L60.86 21.79L61.00 21.70L61.14 21.61L61.28 21.52L61.41 21.42L61.54 21.32L61.67 21.21L61.79 21.11L61.91 21.00L62.03 20.88L62.14 20.76L62.25 20.64L62.36 20.52L62.47 20.39L62.57 20.26L62.67 20.13L62.76 19.99L62.85 19.85L62.93 19.70L63.01 19.56L63.09 19.41L63.16 19.25L63.23 19.10L63.30 18.93L63.36 18.76L63.41 18.59L63.47 18.41L63.52 18.22L63.57 18.02L63.62 17.83L63.66 17.62L63.70 17.41L63.74 17.20L63.77 16.98L63.80 16.76L63.83 16.54L63.86 16.31L63.88 16.08L63.90 15.85L63.91 15.61L63.92 15.37L63.93 15.14L63.94 14.90L63.94 14.66L63.94 14.42L63.93 14.18L63.92 13.94L63.91 13.70L63.89 13.46L63.87 13.22L63.85 12.99L63.82 12.75L63.79 12.52L63.75 12.29L63.71 12.07L63.67 11.84L63.62 11.62L63.56 11.41L63.51 11.20L63.44 10.99L63.38 10.79L63.31 10.59L63.23 10.40L63.15 10.22L63.07 10.03L62.98 9.85L62.88 9.67L62.78 9.49L62.68 9.30L62.57 9.12L62.46 8.95L62.34 8.77L62.22 8.59L62.10 8.42L61.97 8.25L61.83 8.07L61.70 7.90L61.56 7.74L61.41 7.57L61.26 7.41L61.11 7.25L60.96 7.09L60.80 6.93L60.64 6.77L60.48 6.62L60.31 6.47L60.14 6.32L59.97 6.18L59.79 6.03L59.61 5.89L59.43 5.76L59.25 5.62L59.06 5.49L58.88 5.36L58.69 5.24L58.50 5.12L58.30 5.00L58.11 4.89L57.91 4.78L57.71 4.67L57.51 4.57L57.31 4.47L57.10 4.37L56.90 4.28L56.68 4.19L56.46 4.11L56.24 4.02L56.01 3.95L55.77 3.87L55.53 3.80L55.29 3.73L55.04 3.66L54.79 3.60L54.54 3.54L54.28 3.49L54.02 3.43L53.76 3.38L53.50 3.33L53.23 3.29L52.97 3.24L52.70 3.20L52.43 3.17L52.16 3.13L51.88 3.10L51.61 3.07L51.34 3.05L51.07 3.02L50.80 3.00L50.53 2.98L50.26 2.96L49.99 2.95L49.73 2.94L49.46 2.93L49.20 2.92L48.94 2.91L48.68 2.91L48.43 2.91L48.18 2.91L47.93 2.91L47.69 2.91L47.45 2.91L47.21 2.92L46.98 2.92L46.75 2.93L46.52 2.93L46.29 2.94L46.06 2.96L45.83 2.97L45.60 2.99L45.36 3.01L45.13 3.04L44.90 3.07L44.67 3.10L44.44 3.13L44.21 3.17L43.98 3.21L43.75 3.25L43.52 3.30L43.30 3.34L43.07 3.39L42.85 3.44L42.63 3.50L42.41 3.55L42.19 3.61L41.98 3.67L41.76 3.73L41.55 3.79L41.35 3.85L41.14 3.92L40.94 3.98L40.74 4.05L40.54 4.12L40.35 4.19L40.15 4.26L39.97 4.33L39.78 4.41L39.60 4.48L39.42 4.55L39.25 4.63L39.08 4.70L38.91 4.78L38.74 4.85L38.58 4.93L38.41 5.00L38.25 5.08L38.08 5.16L37.92 5.25L37.76 5.34L37.61 5.44L37.45 5.54L37.30 5.64L37.15 5.75L37.01 5.86L36.87 5.97L36.73 6.09L36.60 6.20L36.46 6.33L36.33 6.45L36.21 6.57L36.09 6.70L35.97 6.83L35.86 6.96L35.75 7.09L35.64 7.23L35.53 7.36L35.43 7.50L35.34 7.64L35.25 7.78L35.16 7.92L35.07 8.06L34.99 8.21L34.92 8.35L34.85 8.50L34.78 8.65L34.72 8.80L34.67 8.95L34.62 9.10L34.57 9.26L34.54 9.42L34.51 9.59L34.50 9.76L34.50 9.93L34.51 10.11L34.54 10.31L34.60 10.50L34.68 10.69L34.77 10.85L34.87 11.01L34.98 11.15L35.09 11.28L35.21 11.40L35.33 11.52L35.45 11.62L35.58 11.73L35.70 11.82L35.83 11.92L35.96 12.01L36.09 12.09L36.22 12.17L36.35 12.25L36.48 12.33L36.62 12.39L36.76 12.46L36.90 12.52L37.04 12.58L37.18 12.64L37.32 12.69L37.46 12.74L37.60 12.79L37.74 12.84L37.88 12.88L38.02 12.92L38.16 12.95L38.30 12.99L38.43 13.01L38.57 13.04L38.70 13.06L38.83 13.08L38.96 13.09L39.09 13.09L39.21 13.10L39.33 13.09L39.45 13.08L39.58 13.06L39.70 13.03L39.82 13.01L39.94 13.00L40.06 12.99L40.18 12.98L40.31 12.96L40.44 12.93L40.57 12.91L40.70 12.87L40.83 12.84L40.96 12.80L41.09 12.76L41.23 12.71L41.36 12.67L41.49 12.62L41.63 12.57L41.76 12.51L41.89 12.46L42.02 12.40L42.15 12.35L42.28 12.29L42.40 12.24L42.53 12.18L42.65 12.12L42.77 12.07L42.88 12.01L43.00 11.96L43.11 11.90L43.21 11.85L43.32 11.80L43.42 11.76L43.51 11.71L43.60 11.67L43.69 11.63L43.77 11.59L43.84 11.56L43.91 11.53L43.97 11.50L44.03 11.48L43.97 11.32L43.91 11.33L43.84 11.36L43.77 11.38L43.69 11.41L43.61 11.44L43.52 11.48L43.42 11.52L43.33 11.56L43.23 11.60L43.12 11.65L43.01 11.69L42.90 11.74L42.79 11.79L42.67 11.84L42.55 11.89L42.42 11.94L42.30 11.99L42.17 12.04L42.05 12.10L41.92 12.15L41.79 12.19L41.66 12.24L41.52 12.29L41.39 12.33L41.26 12.38L41.13 12.42L41.00 12.46L40.87 12.49L40.75 12.52L40.62 12.55L40.50 12.58L40.38 12.60L40.26 12.62L40.14 12.63L40.03 12.64L39.92 12.64L39.82 12.64L39.72 12.62L39.63 12.57L39.55 12.52L39.46 12.47L39.38 12.42L39.29 12.36L39.20 12.31L39.11 12.25L39.02 12.19L38.92 12.12L38.83 12.06L38.74 11.99L38.65 11.91L38.55 11.84L38.46 11.76L38.37 11.68L38.28 11.60L38.19 11.51L38.11 11.43L38.03 11.34L37.95 11.25L37.87 11.16L37.80 11.07L37.73 10.97L37.67 10.88L37.61 10.79L37.55 10.70L37.50 10.61L37.45 10.53L37.41 10.44L37.38 10.36L37.35 10.28L37.34 10.20L37.33 10.12L37.32 10.06L37.33 10.00L37.35 9.95L37.37 9.90L37.39 9.87L37.42 9.86L37.45 9.86L37.48 9.87L37.49 9.89L37.50 9.89L37.50 9.87L37.49 9.84L37.49 9.81L37.49 9.76L37.48 9.71L37.48 9.65L37.49 9.58L37.49 9.51L37.50 9.43L37.52 9.35L37.54 9.26L37.56 9.17L37.58 9.08L37.61 8.98L37.65 8.88L37.68 8.78L37.72 8.67L37.77 8.56L37.82 8.46L37.87 8.35L37.92 8.24L37.98 8.12L38.05 8.01L38.11 7.90L38.18 7.79L38.25 7.67L38.33 7.56L38.40 7.45L38.48 7.34L38.56 7.23L38.65 7.12L38.74 7.01L38.83 6.90L38.92 6.79L39.01 6.68L39.11 6.58L39.21 6.48L39.31 6.37L39.42 6.27L39.54 6.18L39.66 6.09L39.79 5.99L39.93 5.90L40.07 5.80L40.22 5.71L40.37 5.62L40.53 5.53L40.69 5.44L40.86 5.35L41.03 5.26L41.20 5.17L41.38 5.09L41.56 5.00L41.75 4.92L41.93 4.84L42.12 4.76L42.32 4.68L42.52 4.60L42.72 4.52L42.92 4.45L43.12 4.38L43.33 4.31L43.54 4.24L43.75 4.17L43.96 4.11L44.17 4.05L44.38 3.99L44.60 3.93L44.82 3.87L45.03 3.82L45.25 3.77L45.47 3.72L45.69 3.68L45.91 3.64L46.13 3.60L46.35 3.56L46.57 3.53L46.80 3.50L47.02 3.48L47.24 3.46L47.47 3.45L47.70 3.43L47.94 3.42L48.18 3.42L48.43 3.41L48.68 3.41L48.93 3.41L49.19 3.42L49.44 3.43L49.70 3.44L49.97 3.45L50.23 3.46L50.49 3.48L50.76 3.50L51.03 3.52L51.29 3.54L51.56 3.57L51.83 3.60L52.09 3.63L52.36 3.66L52.63 3.70L52.89 3.74L53.15 3.78L53.41 3.82L53.67 3.87L53.93 3.92L54.18 3.97L54.43 4.03L54.68 4.09L54.92 4.15L55.16 4.21L55.39 4.28L55.62 4.35L55.85 4.42L56.07 4.50L56.29 4.57L56.49 4.66L56.70 4.74L56.90 4.83L57.09 4.92L57.29 5.01L57.48 5.11L57.67 5.22L57.86 5.32L58.05 5.43L58.23 5.54L58.42 5.66L58.60 5.78L58.78 5.90L58.96 6.03L59.13 6.16L59.31 6.29L59.48 6.42L59.65 6.56L59.81 6.70L59.98 6.84L60.14 6.99L60.30 7.14L60.45 7.28L60.60 7.44L60.75 7.59L60.90 7.75L61.04 7.90L61.18 8.06L61.31 8.22L61.44 8.38L61.57 8.55L61.69 8.71L61.81 8.88L61.93 9.05L62.04 9.22L62.15 9.39L62.25 9.56L62.35 9.73L62.44 9.90L62.53 10.07L62.61 10.25L62.69 10.42L62.77 10.60L62.84 10.77L62.91 10.95L62.97 11.14L63.03 11.34L63.08 11.53L63.13 11.74L63.18 11.95L63.22 12.16L63.26 12.37L63.29 12.59L63.32 12.82L63.35 13.04L63.37 13.27L63.39 13.50L63.41 13.73L63.42 13.96L63.43 14.19L63.44 14.42L63.44 14.66L63.44 14.89L63.43 15.12L63.42 15.35L63.41 15.58L63.40 15.81L63.38 16.04L63.36 16.26L63.34 16.48L63.31 16.70L63.28 16.91L63.25 17.12L63.21 17.32L63.17 17.52L63.13 17.72L63.09 17.91L63.04 18.09L62.99 18.27L62.94 18.44L62.88 18.60L62.83 18.76L62.77 18.90L62.71 19.05L62.64 19.19L62.57 19.32L62.50 19.46L62.42 19.59L62.34 19.71L62.26 19.84L62.17 19.96L62.08 20.08L61.98 20.20L61.88 20.31L61.78 20.42L61.68 20.53L61.57 20.63L61.46 20.73L61.34 20.83L61.23 20.93L61.11 21.02L60.98 21.11L60.86 21.20L60.73 21.28L60.60 21.37L60.47 21.45L60.34 21.52L60.20 21.60L60.06 21.67L59.92 21.73L59.78 21.80L59.63 21.86L59.49 21.92L59.34 21.98L59.19 22.03L59.04 22.08L58.89 22.13L58.73 22.17L58.58 22.21L58.43 22.25L58.27 22.29L58.11 22.32L57.96 22.35L57.80 22.38L57.64 22.40L57.48 22.42L57.31 22.44L57.14 22.45L56.97 22.46L56.80 22.46L56.63 22.46L56.45 22.44L56.27 22.43L56.09 22.40L55.91 22.38L55.72 22.35L55.54 22.32L55.35 22.29L55.16 22.25L54.97 22.21L54.77 22.17L54.58 22.13L54.38 22.09L54.18 22.04L53.98 21.99L53.78 21.94L53.58 21.89L53.37 21.84L53.16 21.78L52.96 21.73L52.75 21.67L52.53 21.62L52.32 21.56L52.11 21.50L51.89 21.44L51.68 21.38L51.46 21.32L51.24 21.25L51.02 21.19L50.80 21.13L50.57 21.07L50.35 21.00L50.13 20.94L49.91 20.87L49.69 20.79L49.48 20.71L49.25 20.62L49.03 20.54L48.81 20.45L48.58 20.36L48.36 20.27L48.13 20.17L47.90 20.08L47.66 19.98L47.43 19.88L47.19 19.78L46.95 19.68L46.71 19.58L46.47 19.48L46.23 19.37L45.98 19.27L45.74 19.16L45.49 19.06L45.24 18.95L44.98 18.85L44.73 18.74L44.48 18.64L44.22 18.53L43.96 18.43L43.70 18.33L43.43 18.22L43.17 18.12L42.90 18.02L42.64 17.92L42.37 17.82L42.10 17.73L41.82 17.63L41.55 17.54L41.27 17.45L41.00 17.36L40.72 17.27L40.44 17.19L40.16 17.11L39.88 17.02L39.60 16.93L39.33 16.84L39.05 16.76L38.76 16.67L38.48 16.58L38.20 16.49L37.91 16.40L37.63 16.31L37.34 16.23L37.05 16.14L36.76 16.05L36.46 15.97L36.17 15.88L35.88 15.79L35.58 15.71L35.28 15.62L34.98 15.54L34.68 15.46L34.38 15.38L34.08 15.30L33.77 15.22L33.47 15.14L33.16 15.06L32.85 14.98L32.54 14.91L32.23 14.84L31.92 14.76L31.60 14.69L31.29 14.62L30.97 14.56L30.65 14.49L30.33 14.43L30.01 14.37L29.69 14.30L29.37 14.25L29.04 14.19L28.72 14.14L28.39 14.08L28.06 14.03L27.73 13.99L27.40 13.94L27.07 13.89L26.73 13.85L26.39 13.81L26.05 13.77L25.71 13.73L25.37 13.69L25.02 13.65L24.68 13.62L24.33 13.58L23.98 13.55L23.63 13.52L23.28 13.49L22.92 13.46L22.57 13.43L22.22 13.40L21.86 13.37L21.50 13.35L21.15 13.32L20.79 13.30L20.43 13.27L20.07 13.25L19.71 13.23L19.36 13.20L19.00 13.18L18.64 13.16L18.28 13.14L17.92 13.12L17.56 13.10L17.20 13.09L16.85 13.07L16.49 13.05L16.13 13.03L15.78 13.01L15.42 13.00L15.07 12.98L14.72 12.96L14.36 12.94L14.01 12.93L13.66 12.91L13.29 12.90L12.92 12.88L12.55 12.87L12.16 12.86L11.77 12.85L11.38 12.84L10.98 12.83L10.58 12.82L10.18 12.82L9.77 12.81L9.36 12.80L8.95 12.80L8.55 12.79L8.14 12.79L7.73 12.79L7.33 12.78L6.92 12.78L6.52 12.78L6.13 12.77L5.73 12.77L5.35 12.77L4.97 12.77L4.59 12.77L4.23 12.77L3.87 12.76L3.51 12.76L3.17 12.76L2.84 12.76L2.52 12.76L2.20 12.76L1.90 12.76L1.62 12.76L1.34 12.76L1.08 12.76L0.83 12.76L0.60 12.75L0.39 12.75L0.19 12.75L0.00 12.75Z'/%3E%3C/svg%3E"); --fl-end-l: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26'%3E%3Cpath fill='%2353605f' transform='matrix%28-1 0 0 1 64 0%29' d='M-0.00 13.25L0.18 13.26L0.38 13.26L0.60 13.26L0.83 13.26L1.08 13.26L1.34 13.26L1.62 13.26L1.90 13.26L2.20 13.26L2.52 13.26L2.84 13.26L3.17 13.26L3.51 13.27L3.86 13.27L4.22 13.27L4.59 13.27L4.97 13.27L5.35 13.27L5.73 13.27L6.12 13.28L6.52 13.28L6.92 13.28L7.32 13.29L7.73 13.29L8.13 13.30L8.54 13.30L8.95 13.31L9.35 13.32L9.76 13.32L10.17 13.33L10.57 13.34L10.97 13.35L11.37 13.36L11.76 13.38L12.15 13.39L12.53 13.40L12.90 13.42L13.27 13.44L13.63 13.46L13.99 13.47L14.34 13.49L14.69 13.51L15.04 13.53L15.40 13.55L15.75 13.56L16.10 13.58L16.46 13.60L16.82 13.62L17.17 13.64L17.53 13.66L17.89 13.68L18.25 13.70L18.60 13.73L18.96 13.75L19.32 13.77L19.68 13.80L20.03 13.82L20.39 13.85L20.75 13.88L21.10 13.90L21.46 13.93L21.81 13.96L22.17 14.00L22.52 14.03L22.87 14.06L23.22 14.10L23.57 14.14L23.91 14.17L24.26 14.21L24.60 14.26L24.95 14.30L25.29 14.34L25.63 14.39L25.96 14.44L26.30 14.49L26.63 14.54L26.96 14.59L27.29 14.65L27.62 14.71L27.94 14.77L28.26 14.83L28.58 14.89L28.90 14.96L29.21 15.03L29.53 15.10L29.84 15.17L30.16 15.24L30.47 15.31L30.78 15.39L31.09 15.47L31.40 15.54L31.70 15.62L32.01 15.71L32.32 15.79L32.62 15.87L32.92 15.95L33.22 16.04L33.52 16.12L33.82 16.21L34.12 16.30L34.42 16.39L34.71 16.47L35.01 16.56L35.30 16.65L35.59 16.74L35.88 16.83L36.17 16.92L36.46 17.01L36.75 17.10L37.04 17.20L37.32 17.29L37.61 17.38L37.89 17.47L38.17 17.56L38.45 17.65L38.73 17.74L39.01 17.83L39.29 17.91L39.57 18.00L39.84 18.09L40.11 18.19L40.38 18.29L40.64 18.39L40.91 18.49L41.17 18.59L41.43 18.69L41.69 18.80L41.95 18.90L42.21 19.01L42.47 19.12L42.73 19.23L42.99 19.33L43.24 19.44L43.50 19.55L43.75 19.66L44.00 19.77L44.26 19.87L44.51 19.98L44.76 20.09L45.01 20.19L45.26 20.30L45.51 20.40L45.76 20.50L46.01 20.60L46.25 20.70L46.50 20.80L46.75 20.89L46.99 20.98L47.24 21.07L47.48 21.16L47.72 21.24L47.96 21.33L48.21 21.41L48.45 21.48L48.69 21.55L48.93 21.62L49.16 21.69L49.40 21.75L49.64 21.81L49.87 21.86L50.10 21.92L50.32 21.98L50.55 22.04L50.77 22.10L50.99 22.16L51.22 22.22L51.44 22.27L51.66 22.33L51.88 22.38L52.10 22.43L52.32 22.48L52.54 22.53L52.75 22.58L52.97 22.62L53.19 22.66L53.40 22.70L53.61 22.74L53.82 22.78L54.03 22.81L54.24 22.84L54.45 22.87L54.66 22.89L54.86 22.91L55.07 22.93L55.27 22.94L55.47 22.96L55.66 22.96L55.86 22.97L56.05 22.97L56.25 22.97L56.43 22.97L56.62 22.96L56.81 22.96L56.99 22.95L57.17 22.95L57.35 22.94L57.53 22.92L57.70 22.90L57.87 22.87L58.04 22.85L58.21 22.81L58.38 22.78L58.54 22.74L58.71 22.70L58.87 22.65L59.03 22.61L59.19 22.56L59.35 22.50L59.51 22.44L59.67 22.38L59.83 22.32L59.98 22.26L60.13 22.19L60.28 22.11L60.43 22.04L60.58 21.96L60.72 21.88L60.86 21.79L61.00 21.70L61.14 21.61L61.28 21.52L61.41 21.42L61.54 21.32L61.67 21.21L61.79 21.11L61.91 21.00L62.03 20.88L62.14 20.76L62.25 20.64L62.36 20.52L62.47 20.39L62.57 20.26L62.67 20.13L62.76 19.99L62.85 19.85L62.93 19.70L63.01 19.56L63.09 19.41L63.16 19.25L63.23 19.10L63.30 18.93L63.36 18.76L63.41 18.59L63.47 18.41L63.52 18.22L63.57 18.02L63.62 17.83L63.66 17.62L63.70 17.41L63.74 17.20L63.77 16.98L63.80 16.76L63.83 16.54L63.86 16.31L63.88 16.08L63.90 15.85L63.91 15.61L63.92 15.37L63.93 15.14L63.94 14.90L63.94 14.66L63.94 14.42L63.93 14.18L63.92 13.94L63.91 13.70L63.89 13.46L63.87 13.22L63.85 12.99L63.82 12.75L63.79 12.52L63.75 12.29L63.71 12.07L63.67 11.84L63.62 11.62L63.56 11.41L63.51 11.20L63.44 10.99L63.38 10.79L63.31 10.59L63.23 10.40L63.15 10.22L63.07 10.03L62.98 9.85L62.88 9.67L62.78 9.49L62.68 9.30L62.57 9.12L62.46 8.95L62.34 8.77L62.22 8.59L62.10 8.42L61.97 8.25L61.83 8.07L61.70 7.90L61.56 7.74L61.41 7.57L61.26 7.41L61.11 7.25L60.96 7.09L60.80 6.93L60.64 6.77L60.48 6.62L60.31 6.47L60.14 6.32L59.97 6.18L59.79 6.03L59.61 5.89L59.43 5.76L59.25 5.62L59.06 5.49L58.88 5.36L58.69 5.24L58.50 5.12L58.30 5.00L58.11 4.89L57.91 4.78L57.71 4.67L57.51 4.57L57.31 4.47L57.10 4.37L56.90 4.28L56.68 4.19L56.46 4.11L56.24 4.02L56.01 3.95L55.77 3.87L55.53 3.80L55.29 3.73L55.04 3.66L54.79 3.60L54.54 3.54L54.28 3.49L54.02 3.43L53.76 3.38L53.50 3.33L53.23 3.29L52.97 3.24L52.70 3.20L52.43 3.17L52.16 3.13L51.88 3.10L51.61 3.07L51.34 3.05L51.07 3.02L50.80 3.00L50.53 2.98L50.26 2.96L49.99 2.95L49.73 2.94L49.46 2.93L49.20 2.92L48.94 2.91L48.68 2.91L48.43 2.91L48.18 2.91L47.93 2.91L47.69 2.91L47.45 2.91L47.21 2.92L46.98 2.92L46.75 2.93L46.52 2.93L46.29 2.94L46.06 2.96L45.83 2.97L45.60 2.99L45.36 3.01L45.13 3.04L44.90 3.07L44.67 3.10L44.44 3.13L44.21 3.17L43.98 3.21L43.75 3.25L43.52 3.30L43.30 3.34L43.07 3.39L42.85 3.44L42.63 3.50L42.41 3.55L42.19 3.61L41.98 3.67L41.76 3.73L41.55 3.79L41.35 3.85L41.14 3.92L40.94 3.98L40.74 4.05L40.54 4.12L40.35 4.19L40.15 4.26L39.97 4.33L39.78 4.41L39.60 4.48L39.42 4.55L39.25 4.63L39.08 4.70L38.91 4.78L38.74 4.85L38.58 4.93L38.41 5.00L38.25 5.08L38.08 5.16L37.92 5.25L37.76 5.34L37.61 5.44L37.45 5.54L37.30 5.64L37.15 5.75L37.01 5.86L36.87 5.97L36.73 6.09L36.60 6.20L36.46 6.33L36.33 6.45L36.21 6.57L36.09 6.70L35.97 6.83L35.86 6.96L35.75 7.09L35.64 7.23L35.53 7.36L35.43 7.50L35.34 7.64L35.25 7.78L35.16 7.92L35.07 8.06L34.99 8.21L34.92 8.35L34.85 8.50L34.78 8.65L34.72 8.80L34.67 8.95L34.62 9.10L34.57 9.26L34.54 9.42L34.51 9.59L34.50 9.76L34.50 9.93L34.51 10.11L34.54 10.31L34.60 10.50L34.68 10.69L34.77 10.85L34.87 11.01L34.98 11.15L35.09 11.28L35.21 11.40L35.33 11.52L35.45 11.62L35.58 11.73L35.70 11.82L35.83 11.92L35.96 12.01L36.09 12.09L36.22 12.17L36.35 12.25L36.48 12.33L36.62 12.39L36.76 12.46L36.90 12.52L37.04 12.58L37.18 12.64L37.32 12.69L37.46 12.74L37.60 12.79L37.74 12.84L37.88 12.88L38.02 12.92L38.16 12.95L38.30 12.99L38.43 13.01L38.57 13.04L38.70 13.06L38.83 13.08L38.96 13.09L39.09 13.09L39.21 13.10L39.33 13.09L39.45 13.08L39.58 13.06L39.70 13.03L39.82 13.01L39.94 13.00L40.06 12.99L40.18 12.98L40.31 12.96L40.44 12.93L40.57 12.91L40.70 12.87L40.83 12.84L40.96 12.80L41.09 12.76L41.23 12.71L41.36 12.67L41.49 12.62L41.63 12.57L41.76 12.51L41.89 12.46L42.02 12.40L42.15 12.35L42.28 12.29L42.40 12.24L42.53 12.18L42.65 12.12L42.77 12.07L42.88 12.01L43.00 11.96L43.11 11.90L43.21 11.85L43.32 11.80L43.42 11.76L43.51 11.71L43.60 11.67L43.69 11.63L43.77 11.59L43.84 11.56L43.91 11.53L43.97 11.50L44.03 11.48L43.97 11.32L43.91 11.33L43.84 11.36L43.77 11.38L43.69 11.41L43.61 11.44L43.52 11.48L43.42 11.52L43.33 11.56L43.23 11.60L43.12 11.65L43.01 11.69L42.90 11.74L42.79 11.79L42.67 11.84L42.55 11.89L42.42 11.94L42.30 11.99L42.17 12.04L42.05 12.10L41.92 12.15L41.79 12.19L41.66 12.24L41.52 12.29L41.39 12.33L41.26 12.38L41.13 12.42L41.00 12.46L40.87 12.49L40.75 12.52L40.62 12.55L40.50 12.58L40.38 12.60L40.26 12.62L40.14 12.63L40.03 12.64L39.92 12.64L39.82 12.64L39.72 12.62L39.63 12.57L39.55 12.52L39.46 12.47L39.38 12.42L39.29 12.36L39.20 12.31L39.11 12.25L39.02 12.19L38.92 12.12L38.83 12.06L38.74 11.99L38.65 11.91L38.55 11.84L38.46 11.76L38.37 11.68L38.28 11.60L38.19 11.51L38.11 11.43L38.03 11.34L37.95 11.25L37.87 11.16L37.80 11.07L37.73 10.97L37.67 10.88L37.61 10.79L37.55 10.70L37.50 10.61L37.45 10.53L37.41 10.44L37.38 10.36L37.35 10.28L37.34 10.20L37.33 10.12L37.32 10.06L37.33 10.00L37.35 9.95L37.37 9.90L37.39 9.87L37.42 9.86L37.45 9.86L37.48 9.87L37.49 9.89L37.50 9.89L37.50 9.87L37.49 9.84L37.49 9.81L37.49 9.76L37.48 9.71L37.48 9.65L37.49 9.58L37.49 9.51L37.50 9.43L37.52 9.35L37.54 9.26L37.56 9.17L37.58 9.08L37.61 8.98L37.65 8.88L37.68 8.78L37.72 8.67L37.77 8.56L37.82 8.46L37.87 8.35L37.92 8.24L37.98 8.12L38.05 8.01L38.11 7.90L38.18 7.79L38.25 7.67L38.33 7.56L38.40 7.45L38.48 7.34L38.56 7.23L38.65 7.12L38.74 7.01L38.83 6.90L38.92 6.79L39.01 6.68L39.11 6.58L39.21 6.48L39.31 6.37L39.42 6.27L39.54 6.18L39.66 6.09L39.79 5.99L39.93 5.90L40.07 5.80L40.22 5.71L40.37 5.62L40.53 5.53L40.69 5.44L40.86 5.35L41.03 5.26L41.20 5.17L41.38 5.09L41.56 5.00L41.75 4.92L41.93 4.84L42.12 4.76L42.32 4.68L42.52 4.60L42.72 4.52L42.92 4.45L43.12 4.38L43.33 4.31L43.54 4.24L43.75 4.17L43.96 4.11L44.17 4.05L44.38 3.99L44.60 3.93L44.82 3.87L45.03 3.82L45.25 3.77L45.47 3.72L45.69 3.68L45.91 3.64L46.13 3.60L46.35 3.56L46.57 3.53L46.80 3.50L47.02 3.48L47.24 3.46L47.47 3.45L47.70 3.43L47.94 3.42L48.18 3.42L48.43 3.41L48.68 3.41L48.93 3.41L49.19 3.42L49.44 3.43L49.70 3.44L49.97 3.45L50.23 3.46L50.49 3.48L50.76 3.50L51.03 3.52L51.29 3.54L51.56 3.57L51.83 3.60L52.09 3.63L52.36 3.66L52.63 3.70L52.89 3.74L53.15 3.78L53.41 3.82L53.67 3.87L53.93 3.92L54.18 3.97L54.43 4.03L54.68 4.09L54.92 4.15L55.16 4.21L55.39 4.28L55.62 4.35L55.85 4.42L56.07 4.50L56.29 4.57L56.49 4.66L56.70 4.74L56.90 4.83L57.09 4.92L57.29 5.01L57.48 5.11L57.67 5.22L57.86 5.32L58.05 5.43L58.23 5.54L58.42 5.66L58.60 5.78L58.78 5.90L58.96 6.03L59.13 6.16L59.31 6.29L59.48 6.42L59.65 6.56L59.81 6.70L59.98 6.84L60.14 6.99L60.30 7.14L60.45 7.28L60.60 7.44L60.75 7.59L60.90 7.75L61.04 7.90L61.18 8.06L61.31 8.22L61.44 8.38L61.57 8.55L61.69 8.71L61.81 8.88L61.93 9.05L62.04 9.22L62.15 9.39L62.25 9.56L62.35 9.73L62.44 9.90L62.53 10.07L62.61 10.25L62.69 10.42L62.77 10.60L62.84 10.77L62.91 10.95L62.97 11.14L63.03 11.34L63.08 11.53L63.13 11.74L63.18 11.95L63.22 12.16L63.26 12.37L63.29 12.59L63.32 12.82L63.35 13.04L63.37 13.27L63.39 13.50L63.41 13.73L63.42 13.96L63.43 14.19L63.44 14.42L63.44 14.66L63.44 14.89L63.43 15.12L63.42 15.35L63.41 15.58L63.40 15.81L63.38 16.04L63.36 16.26L63.34 16.48L63.31 16.70L63.28 16.91L63.25 17.12L63.21 17.32L63.17 17.52L63.13 17.72L63.09 17.91L63.04 18.09L62.99 18.27L62.94 18.44L62.88 18.60L62.83 18.76L62.77 18.90L62.71 19.05L62.64 19.19L62.57 19.32L62.50 19.46L62.42 19.59L62.34 19.71L62.26 19.84L62.17 19.96L62.08 20.08L61.98 20.20L61.88 20.31L61.78 20.42L61.68 20.53L61.57 20.63L61.46 20.73L61.34 20.83L61.23 20.93L61.11 21.02L60.98 21.11L60.86 21.20L60.73 21.28L60.60 21.37L60.47 21.45L60.34 21.52L60.20 21.60L60.06 21.67L59.92 21.73L59.78 21.80L59.63 21.86L59.49 21.92L59.34 21.98L59.19 22.03L59.04 22.08L58.89 22.13L58.73 22.17L58.58 22.21L58.43 22.25L58.27 22.29L58.11 22.32L57.96 22.35L57.80 22.38L57.64 22.40L57.48 22.42L57.31 22.44L57.14 22.45L56.97 22.46L56.80 22.46L56.63 22.46L56.45 22.44L56.27 22.43L56.09 22.40L55.91 22.38L55.72 22.35L55.54 22.32L55.35 22.29L55.16 22.25L54.97 22.21L54.77 22.17L54.58 22.13L54.38 22.09L54.18 22.04L53.98 21.99L53.78 21.94L53.58 21.89L53.37 21.84L53.16 21.78L52.96 21.73L52.75 21.67L52.53 21.62L52.32 21.56L52.11 21.50L51.89 21.44L51.68 21.38L51.46 21.32L51.24 21.25L51.02 21.19L50.80 21.13L50.57 21.07L50.35 21.00L50.13 20.94L49.91 20.87L49.69 20.79L49.48 20.71L49.25 20.62L49.03 20.54L48.81 20.45L48.58 20.36L48.36 20.27L48.13 20.17L47.90 20.08L47.66 19.98L47.43 19.88L47.19 19.78L46.95 19.68L46.71 19.58L46.47 19.48L46.23 19.37L45.98 19.27L45.74 19.16L45.49 19.06L45.24 18.95L44.98 18.85L44.73 18.74L44.48 18.64L44.22 18.53L43.96 18.43L43.70 18.33L43.43 18.22L43.17 18.12L42.90 18.02L42.64 17.92L42.37 17.82L42.10 17.73L41.82 17.63L41.55 17.54L41.27 17.45L41.00 17.36L40.72 17.27L40.44 17.19L40.16 17.11L39.88 17.02L39.60 16.93L39.33 16.84L39.05 16.76L38.76 16.67L38.48 16.58L38.20 16.49L37.91 16.40L37.63 16.31L37.34 16.23L37.05 16.14L36.76 16.05L36.46 15.97L36.17 15.88L35.88 15.79L35.58 15.71L35.28 15.62L34.98 15.54L34.68 15.46L34.38 15.38L34.08 15.30L33.77 15.22L33.47 15.14L33.16 15.06L32.85 14.98L32.54 14.91L32.23 14.84L31.92 14.76L31.60 14.69L31.29 14.62L30.97 14.56L30.65 14.49L30.33 14.43L30.01 14.37L29.69 14.30L29.37 14.25L29.04 14.19L28.72 14.14L28.39 14.08L28.06 14.03L27.73 13.99L27.40 13.94L27.07 13.89L26.73 13.85L26.39 13.81L26.05 13.77L25.71 13.73L25.37 13.69L25.02 13.65L24.68 13.62L24.33 13.58L23.98 13.55L23.63 13.52L23.28 13.49L22.92 13.46L22.57 13.43L22.22 13.40L21.86 13.37L21.50 13.35L21.15 13.32L20.79 13.30L20.43 13.27L20.07 13.25L19.71 13.23L19.36 13.20L19.00 13.18L18.64 13.16L18.28 13.14L17.92 13.12L17.56 13.10L17.20 13.09L16.85 13.07L16.49 13.05L16.13 13.03L15.78 13.01L15.42 13.00L15.07 12.98L14.72 12.96L14.36 12.94L14.01 12.93L13.66 12.91L13.29 12.90L12.92 12.88L12.55 12.87L12.16 12.86L11.77 12.85L11.38 12.84L10.98 12.83L10.58 12.82L10.18 12.82L9.77 12.81L9.36 12.80L8.95 12.80L8.55 12.79L8.14 12.79L7.73 12.79L7.33 12.78L6.92 12.78L6.52 12.78L6.13 12.77L5.73 12.77L5.35 12.77L4.97 12.77L4.59 12.77L4.23 12.77L3.87 12.76L3.51 12.76L3.17 12.76L2.84 12.76L2.52 12.76L2.20 12.76L1.90 12.76L1.62 12.76L1.34 12.76L1.08 12.76L0.83 12.76L0.60 12.75L0.39 12.75L0.19 12.75L0.00 12.75Z'/%3E%3C/svg%3E"); --fl-centre: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='26'%3E%3Cpath fill='%2353605f' d='M51.80 13.53L52.53 13.81L53.27 14.08L54.00 14.36L54.73 14.64L55.46 14.91L56.19 15.19L56.92 15.46L57.65 15.72L58.38 15.99L59.11 16.25L59.83 16.51L60.55 16.76L61.27 17.01L61.99 17.26L62.70 17.50L63.41 17.73L64.12 17.96L64.82 18.19L65.52 18.41L66.22 18.62L66.91 18.82L67.60 19.02L68.28 19.21L68.96 19.40L69.63 19.57L70.30 19.74L70.96 19.90L71.62 20.05L72.27 20.20L72.91 20.33L73.55 20.46L74.18 20.57L74.81 20.68L75.42 20.78L76.03 20.87L76.64 20.95L77.23 21.02L77.82 21.08L78.40 21.13L78.97 21.18L79.53 21.21L80.09 21.23L80.63 21.25L81.17 21.25L81.70 21.25L82.22 21.25L82.73 21.23L83.23 21.21L83.72 21.17L84.20 21.13L84.67 21.07L85.13 21.01L85.59 20.94L86.03 20.85L86.46 20.76L86.88 20.66L87.29 20.55L87.69 20.43L88.08 20.30L88.46 20.16L88.83 20.02L89.19 19.86L89.53 19.70L89.87 19.52L90.19 19.34L90.50 19.16L90.80 18.96L91.09 18.76L91.37 18.55L91.63 18.33L91.88 18.11L92.12 17.88L92.35 17.64L92.56 17.40L92.77 17.15L92.96 16.90L93.13 16.64L93.30 16.38L93.45 16.12L93.59 15.85L93.71 15.57L93.82 15.29L93.92 15.01L94.01 14.73L94.08 14.45L94.14 14.16L94.19 13.87L94.22 13.58L94.24 13.29L94.25 13.00L94.24 12.71L94.22 12.42L94.19 12.13L94.14 11.84L94.08 11.55L94.01 11.27L93.92 10.99L93.82 10.71L93.71 10.43L93.59 10.15L93.45 9.88L93.30 9.62L93.13 9.36L92.96 9.10L92.77 8.85L92.56 8.60L92.35 8.36L92.12 8.12L91.88 7.89L91.63 7.67L91.37 7.45L91.09 7.24L90.80 7.04L90.50 6.84L90.19 6.66L89.87 6.48L89.53 6.30L89.19 6.14L88.83 5.98L88.46 5.84L88.08 5.70L87.69 5.57L87.29 5.45L86.88 5.34L86.46 5.24L86.03 5.15L85.59 5.06L85.13 4.99L84.67 4.93L84.20 4.87L83.72 4.83L83.23 4.79L82.73 4.77L82.22 4.75L81.70 4.75L81.17 4.75L80.63 4.75L80.09 4.77L79.53 4.79L78.97 4.82L78.40 4.87L77.82 4.92L77.23 4.98L76.64 5.05L76.03 5.13L75.42 5.22L74.81 5.32L74.18 5.43L73.55 5.54L72.91 5.67L72.27 5.80L71.62 5.95L70.96 6.10L70.30 6.26L69.63 6.43L68.96 6.60L68.28 6.79L67.60 6.98L66.91 7.18L66.22 7.38L65.52 7.59L64.82 7.81L64.12 8.04L63.41 8.27L62.70 8.50L61.99 8.74L61.27 8.99L60.55 9.24L59.83 9.49L59.11 9.75L58.38 10.01L57.65 10.28L56.92 10.54L56.19 10.81L55.46 11.09L54.73 11.36L54.00 11.64L53.27 11.92L52.53 12.19L51.80 12.47L51.07 12.75L50.33 13.03L49.60 13.31L48.87 13.59L48.14 13.87L47.41 14.14L46.69 14.41L45.96 14.69L45.24 14.96L44.52 15.22L43.80 15.49L43.09 15.75L42.37 16.00L41.67 16.25L40.96 16.50L40.26 16.75L39.56 16.98L38.86 17.22L38.17 17.45L37.49 17.67L36.81 17.88L36.13 18.09L35.46 18.30L34.79 18.49L34.13 18.69L33.47 18.87L32.82 19.04L32.18 19.21L31.54 19.37L30.91 19.53L30.29 19.67L29.67 19.81L29.06 19.93L28.45 20.05L27.85 20.16L27.26 20.27L26.68 20.36L26.10 20.44L25.54 20.52L24.98 20.58L24.43 20.63L23.88 20.68L23.35 20.71L22.82 20.74L22.30 20.75L21.79 20.75L21.29 20.73L20.80 20.71L20.32 20.67L19.85 20.63L19.39 20.58L18.94 20.52L18.50 20.44L18.07 20.36L17.65 20.27L17.24 20.18L16.84 20.07L16.46 19.95L16.08 19.83L15.72 19.69L15.36 19.55L15.02 19.40L14.69 19.25L14.37 19.08L14.06 18.91L13.76 18.73L13.48 18.55L13.21 18.36L12.94 18.16L12.70 17.95L12.46 17.74L12.23 17.53L12.02 17.30L11.82 17.08L11.63 16.85L11.45 16.61L11.29 16.37L11.13 16.13L10.99 15.88L10.86 15.63L10.75 15.37L10.64 15.12L10.55 14.86L10.47 14.60L10.40 14.33L10.35 14.07L10.31 13.80L10.27 13.54L10.26 13.27L10.25 13.00L10.26 12.73L10.27 12.46L10.31 12.20L10.35 11.93L10.40 11.67L10.47 11.40L10.55 11.14L10.64 10.88L10.75 10.63L10.86 10.37L10.99 10.12L11.13 9.87L11.29 9.63L11.45 9.39L11.63 9.15L11.82 8.92L12.02 8.70L12.23 8.47L12.46 8.26L12.70 8.05L12.94 7.84L13.21 7.64L13.48 7.45L13.76 7.27L14.06 7.09L14.37 6.92L14.69 6.75L15.02 6.60L15.36 6.45L15.72 6.31L16.08 6.17L16.46 6.05L16.84 5.93L17.24 5.82L17.65 5.73L18.07 5.64L18.50 5.56L18.94 5.48L19.39 5.42L19.85 5.37L20.32 5.33L20.80 5.29L21.29 5.27L21.79 5.25L22.30 5.25L22.82 5.26L23.35 5.29L23.88 5.32L24.43 5.37L24.98 5.42L25.54 5.48L26.10 5.56L26.68 5.64L27.26 5.73L27.85 5.84L28.45 5.95L29.06 6.07L29.67 6.19L30.29 6.33L30.91 6.47L31.54 6.63L32.18 6.79L32.82 6.96L33.47 7.13L34.13 7.31L34.79 7.51L35.46 7.70L36.13 7.91L36.81 8.12L37.49 8.33L38.17 8.55L38.86 8.78L39.56 9.02L40.26 9.25L40.96 9.50L41.67 9.75L42.37 10.00L43.09 10.25L43.80 10.51L44.52 10.78L45.24 11.04L45.96 11.31L46.69 11.59L47.41 11.86L48.14 12.13L48.87 12.41L49.60 12.69L50.33 12.97L51.07 13.25L51.80 13.53L52.20 12.47L51.47 12.19L50.73 11.92L50.00 11.64L49.27 11.36L48.54 11.09L47.81 10.81L47.08 10.54L46.35 10.28L45.62 10.01L44.89 9.75L44.17 9.49L43.45 9.24L42.73 8.99L42.01 8.74L41.30 8.50L40.59 8.27L39.88 8.04L39.18 7.81L38.48 7.59L37.78 7.38L37.09 7.18L36.40 6.98L35.72 6.79L35.04 6.60L34.37 6.43L33.70 6.26L33.04 6.10L32.38 5.95L31.73 5.80L31.09 5.67L30.45 5.54L29.82 5.43L29.19 5.32L28.58 5.22L27.97 5.13L27.36 5.05L26.77 4.98L26.18 4.92L25.60 4.87L25.03 4.82L24.47 4.79L23.91 4.77L23.37 4.75L22.83 4.75L22.30 4.75L21.78 4.75L21.27 4.77L20.77 4.79L20.28 4.83L19.80 4.87L19.33 4.93L18.87 4.99L18.41 5.06L17.97 5.15L17.54 5.24L17.12 5.34L16.71 5.45L16.31 5.57L15.92 5.70L15.54 5.84L15.17 5.98L14.81 6.14L14.47 6.30L14.13 6.48L13.81 6.66L13.50 6.84L13.20 7.04L12.91 7.24L12.63 7.45L12.37 7.67L12.12 7.89L11.88 8.12L11.65 8.36L11.44 8.60L11.23 8.85L11.04 9.10L10.87 9.36L10.70 9.62L10.55 9.88L10.41 10.15L10.29 10.43L10.18 10.71L10.08 10.99L9.99 11.27L9.92 11.55L9.86 11.84L9.81 12.13L9.78 12.42L9.76 12.71L9.75 13.00L9.76 13.29L9.78 13.58L9.81 13.87L9.86 14.16L9.92 14.45L9.99 14.73L10.08 15.01L10.18 15.29L10.29 15.57L10.41 15.85L10.55 16.12L10.70 16.38L10.87 16.64L11.04 16.90L11.23 17.15L11.44 17.40L11.65 17.64L11.88 17.88L12.12 18.11L12.37 18.33L12.63 18.55L12.91 18.76L13.20 18.96L13.50 19.16L13.81 19.34L14.13 19.52L14.47 19.70L14.81 19.86L15.17 20.02L15.54 20.16L15.92 20.30L16.31 20.43L16.71 20.55L17.12 20.66L17.54 20.76L17.97 20.85L18.41 20.94L18.87 21.01L19.33 21.07L19.80 21.13L20.28 21.17L20.77 21.21L21.27 21.23L21.78 21.25L22.30 21.25L22.83 21.25L23.37 21.25L23.91 21.23L24.47 21.21L25.03 21.18L25.60 21.13L26.18 21.08L26.77 21.02L27.36 20.95L27.97 20.87L28.58 20.78L29.19 20.68L29.82 20.57L30.45 20.46L31.09 20.33L31.73 20.20L32.38 20.05L33.04 19.90L33.70 19.74L34.37 19.57L35.04 19.40L35.72 19.21L36.40 19.02L37.09 18.82L37.78 18.62L38.48 18.41L39.18 18.19L39.88 17.96L40.59 17.73L41.30 17.50L42.01 17.26L42.73 17.01L43.45 16.76L44.17 16.51L44.89 16.25L45.62 15.99L46.35 15.72L47.08 15.46L47.81 15.19L48.54 14.91L49.27 14.64L50.00 14.36L50.73 14.08L51.47 13.81L52.20 13.53L52.93 13.25L53.67 12.97L54.40 12.69L55.13 12.41L55.86 12.13L56.59 11.86L57.31 11.59L58.04 11.31L58.76 11.04L59.48 10.78L60.20 10.51L60.91 10.25L61.63 10.00L62.33 9.75L63.04 9.50L63.74 9.25L64.44 9.02L65.14 8.78L65.83 8.55L66.51 8.33L67.19 8.12L67.87 7.91L68.54 7.70L69.21 7.51L69.87 7.31L70.53 7.13L71.18 6.96L71.82 6.79L72.46 6.63L73.09 6.47L73.71 6.33L74.33 6.19L74.94 6.07L75.55 5.95L76.15 5.84L76.74 5.73L77.32 5.64L77.90 5.56L78.46 5.48L79.02 5.42L79.57 5.37L80.12 5.32L80.65 5.29L81.18 5.26L81.70 5.25L82.21 5.25L82.71 5.27L83.20 5.29L83.68 5.33L84.15 5.37L84.61 5.42L85.06 5.48L85.50 5.56L85.93 5.64L86.35 5.73L86.76 5.82L87.16 5.93L87.54 6.05L87.92 6.17L88.28 6.31L88.64 6.45L88.98 6.60L89.31 6.75L89.63 6.92L89.94 7.09L90.24 7.27L90.52 7.45L90.79 7.64L91.06 7.84L91.30 8.05L91.54 8.26L91.77 8.47L91.98 8.70L92.18 8.92L92.37 9.15L92.55 9.39L92.71 9.63L92.87 9.87L93.01 10.12L93.14 10.37L93.25 10.63L93.36 10.88L93.45 11.14L93.53 11.40L93.60 11.67L93.65 11.93L93.69 12.20L93.73 12.46L93.74 12.73L93.75 13.00L93.74 13.27L93.73 13.54L93.69 13.80L93.65 14.07L93.60 14.33L93.53 14.60L93.45 14.86L93.36 15.12L93.25 15.37L93.14 15.63L93.01 15.88L92.87 16.13L92.71 16.37L92.55 16.61L92.37 16.85L92.18 17.08L91.98 17.30L91.77 17.53L91.54 17.74L91.30 17.95L91.06 18.16L90.79 18.36L90.52 18.55L90.24 18.73L89.94 18.91L89.63 19.08L89.31 19.25L88.98 19.40L88.64 19.55L88.28 19.69L87.92 19.83L87.54 19.95L87.16 20.07L86.76 20.18L86.35 20.27L85.93 20.36L85.50 20.44L85.06 20.52L84.61 20.58L84.15 20.63L83.68 20.67L83.20 20.71L82.71 20.73L82.21 20.75L81.70 20.75L81.18 20.74L80.65 20.71L80.12 20.68L79.57 20.63L79.02 20.58L78.46 20.52L77.90 20.44L77.32 20.36L76.74 20.27L76.15 20.16L75.55 20.05L74.94 19.93L74.33 19.81L73.71 19.67L73.09 19.53L72.46 19.37L71.82 19.21L71.18 19.04L70.53 18.87L69.87 18.69L69.21 18.49L68.54 18.30L67.87 18.09L67.19 17.88L66.51 17.67L65.83 17.45L65.14 17.22L64.44 16.98L63.74 16.75L63.04 16.50L62.33 16.25L61.63 16.00L60.91 15.75L60.20 15.49L59.48 15.22L58.76 14.96L58.04 14.69L57.31 14.41L56.59 14.14L55.86 13.87L55.13 13.59L54.40 13.31L53.67 13.03L52.93 12.75L52.20 12.47Z'/%3E%3Ccircle cx='52' cy='13' r='1.7' fill='%2353605f'/%3E%3C/svg%3E"); --fl-rule: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='26' viewBox='0 0 100 26' preserveAspectRatio='none'%3E%3Cpath fill='%2353605f' d='M0 12.65Q50 12.3 100 12.65V13.35Q50 13.7 0 13.35Z'/%3E%3C/svg%3E"); --fl-tip-r: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='26'%3E%3Cpath fill='%2353605f' d='M0 12.65H8V13.35H0Z'/%3E%3Ccircle cx='10' cy='13' r='2.2' fill='%2353605f'/%3E%3C/svg%3E"); --fl-tip-l: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='26'%3E%3Cpath fill='%2353605f' d='M6 12.65H14V13.35H6Z'/%3E%3Ccircle cx='4' cy='13' r='2.2' fill='%2353605f'/%3E%3C/svg%3E"); } @media (min-width: 740px) { .app-start { flex: 1; } .app-start::after { content: ""; flex: 1; min-width: 0; height: 26px; background: var(--fl-centre) center / 104px 26px no-repeat, var(--fl-end-l) left center / 64px 26px no-repeat, var(--fl-end-r) right center / 64px 26px no-repeat, var(--fl-rule) center / calc(100% - 100px) 26px no-repeat; } } @media (min-width: 800px) { /* the title takes the bar's middle */ body[data-mode="voyage"] .app-start { flex: none; } body[data-mode="voyage"] .app-start::after { content: none; } } @media (min-width: 1260px), (min-width: 800px) and (max-width: 899px) { /* where it leaves room for a flourish either side: the links fold into the menu at 800-899px */ .voyage-summary::before, .voyage-summary::after { content: ""; flex: 1 1 0; min-width: 96px; align-self: center; height: 26px; } .voyage-summary::before { margin-right: 8px; background: var(--fl-end-l) left center / 64px 26px no-repeat, var(--fl-tip-r) right center / 14px 26px no-repeat, var(--fl-rule) right 10px center / calc(100% - 50px) 26px no-repeat; } .voyage-summary::after { margin-left: 8px; background: var(--fl-tip-l) left center / 14px 26px no-repeat, var(--fl-end-r) right center / 64px 26px no-repeat, var(--fl-rule) left 10px center / calc(100% - 50px) 26px no-repeat; } } /* the day's head, a tinted band as a ledger's head is, over its entry */ .entry-head { flex: none; min-width: 0; padding: 12px var(--gutter) 10px; background: var(--paper-2); border-bottom: 1px solid var(--paper-edge); border-top-left-radius: inherit; border-top-right-radius: inherit; } .entry-date-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .entry-actions { display: flex; align-items: center; flex: none; gap: 8px; margin-left: auto; } .original-link { position: relative; flex: none; padding: 2px 9px; border: 1px solid var(--paper-edge); border-radius: 999px; background: none; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--accent); cursor: pointer; white-space: nowrap; } .original-link:hover { border-color: var(--accent); } .day { display: flex; flex-direction: column; align-items: stretch; } body[data-mode="voyage"] .day { padding: 12px var(--gutter); } body[data-mode="index"] .entry-head { display: none; } .wordmark { font-family: var(--display); font-size: 16px; font-weight: 600; margin: 0 0 4px; } .search { width: 100%; padding: 4px 0; font: 13px/1.4 var(--body); background: none; border: 0; border-bottom: 1px solid var(--edge); border-radius: 0; color: var(--ink); } .search::placeholder { color: var(--ink-soft); } /* in a panel's head, a field of its own: a lens, a rounded edge, and the accent's ring while it is in use */ .side-head .search { min-height: 36px; padding: 6px 12px 6px 34px; border: 1px solid var(--paper-edge); border-radius: 8px; background: var(--paper-2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23626b6c' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6'/%3E%3Cpath d='M10.3 10.3 14 14'/%3E%3C/svg%3E") no-repeat 11px center / 15px 15px; } .side-head .search:focus { outline: none; border-color: var(--accent); background-color: var(--paper); box-shadow: 0 0 0 3px rgba(48, 94, 95, 0.16); } /* Compact selects share one quiet underline; the selected filter has a stronger edge. */ .filters { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; } .pick, .sort-pick { appearance: none; field-sizing: content; font: inherit; cursor: pointer; padding: 0 15px 0 0; border: 0; border-bottom: 1px solid var(--ink-line); border-radius: 0; background: no-repeat right 1px center / 10px 6px; /* the arrow (each its own) */ color: var(--ink); } .pick { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23626b6c' stroke-width='1.5'/%3E%3C/svg%3E"); font-size: 12px; } .pick.on { font-weight: 500; border-bottom: 1px solid var(--ink); } .list-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; min-height: 36px; margin: 0; padding: 8px var(--gutter) 6px; font-size: 12px; color: var(--ink-soft); } .list-bar .sort-pick { border-bottom: 0; font-weight: 600; } /* a word with its arrow, on the count line */ .sort-pick { /* a pick as a word on the count line, its arrow after it, in ink */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23253234' stroke-width='1.5'/%3E%3C/svg%3E"); } .head-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; } .head-top:has(> .wordmark) { margin-bottom: 10px; } .head-top > .wordmark { margin: 0; } /* the voyage list as a ledger: the vessel, her years, and her master, then the counts in columns, right-aligned in tabular figures, under heads that sort by them and stay in view as the list scrolls (app.js, ledgerHead). The columns are fixed widths, so they line up across the decades */ #voyages { --ledger: minmax(0, 1fr) 42px var(--metric-w, 58px); padding-bottom: 8px; } #voyages:has(.lh-miles) { --metric-w: 86px; } /* Keep the distance label and sort arrow on one line. */ .ledger-head, .voyage-item { display: grid; grid-template-columns: var(--ledger); column-gap: 8px; } .ledger-head { position: sticky; top: 0; z-index: 1; align-items: end; padding: 4px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--paper-edge); } .lh { padding: 0; border: 0; background: none; font: 400 11px/1.4 var(--body); text-align: right; white-space: nowrap; color: var(--ink-soft); } .lh-vessel { text-align: left; } .lh-meta { display: none; text-align: left; } button.lh { cursor: pointer; } button.lh:hover, button.lh:active, .lh.on { color: var(--ink); } .lh.on::after { content: "↓"; margin-left: 2px; letter-spacing: 0; } .decade { margin: 0 var(--gutter); padding: 10px 0 3px; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 400; color: var(--ink-soft); } .ledger-head + .decade { padding-top: 10px; } .voyage-list { list-style: none; margin: 0; padding: 0; } :is(.voyage-list, .mv-list) li { position: relative; } /* Inset separators follow the content gutter while the full row stays clickable. */ :is(.voyage-list, .mv-list) li + li { border-top: 1px solid transparent; } :is(.voyage-list, .mv-list) li + li::before { content: ""; position: absolute; top: -1px; inset-inline: var(--gutter); height: 1px; background: var(--rule); pointer-events: none; } .voyage-list li:has(:focus-visible) { background: var(--hover); } @media (hover: hover) { .voyage-list li:hover { background: var(--hover); } } .voyage-item { align-items: baseline; padding: 6px var(--gutter); text-decoration: none; } .vi-name { min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; } .vi-meta { grid-column: 1 / -1; font-size: 11px; line-height: 1.4; color: var(--ink-soft); } .vi-n { font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; white-space: nowrap; } .vi-years { font-variant-numeric: tabular-nums; white-space: nowrap; } /* the voyage's header */ .vessel { font-family: var(--display); font-style: normal; font-weight: 650; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; margin: 0; } .vessel-meta { margin: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; } /* the catch so far, a badge after the voyage's title: a whole whale, the stamp for one caught, and the count */ .catch { display: flex; align-items: center; gap: 6px; flex: none; margin: 0; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--accent); color: var(--paper); font-size: 12px; line-height: 16px; white-space: nowrap; } .catch svg { width: 21px; height: 9px; fill: currentColor; } .catch b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .sep { margin: 0 6px; color: var(--ink-soft); opacity: 0.5; } .block { padding: 12px var(--gutter); border-bottom: 1px solid var(--paper-edge); } .block:last-child { border-bottom: 0; } .notice { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--accent); } /* something did not load (app.js: failed) */ /* the page as text, before the script draws it or where the map cannot start (atlas/functions/voyages) */ .static :is(ol, ul) { margin: 10px 0; padding-left: 1.3em; } .static li { margin: 5px 0; } .label { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; font-weight: 400; } /* the day */ /* The day as a log's page heads it, in the book face of the welcome's title; then where the ship was, her position and a tag for the kind of place: tinted at sea or off the land, filled at anchor or in port. */ .day-date { font-family: "Besley", Georgia, serif; font-weight: 500; font-size: 21px; letter-spacing: -0.02em; margin: 0; line-height: 1.2; } .where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; font-size: 11.5px; line-height: 1.3; color: var(--ink-soft); } .where .pos { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .place { padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background: rgba(41, 73, 75, 0.1); color: var(--sea); } /* the sea, a tenth */ .place[data-where="near land"] { background: rgba(192, 184, 154, 0.3); color: #6b6142; } /* the brass, and a darker brass, 5:1 on it */ .place:is([data-where="at anchor"], [data-where="in port"]) { background: var(--accent); color: var(--paper); } /* the glass: how long the day stays up while the voyage plays (app.js, schedule) */ .glass { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--ink-soft); } .glass svg { width: 10px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; } .glass-track { flex: 1; height: 3px; border-radius: 2px; background: var(--paper-edge); overflow: hidden; } .glass-sand { display: block; height: 100%; background: var(--accent); transform-origin: left center; } .glass-left { min-width: 3ch; font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; } .glyph { width: 26px; height: 18px; display: inline-block; background: no-repeat center / contain; } .bead { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 0 1px var(--sea-deep); } .voyage-end { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; } .voyage-end :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; white-space: nowrap; } .voyage-end button { padding: 0; background: none; border: 0; color: inherit; font-family: inherit; text-decoration: underline; cursor: pointer; } .voyage-end .next-voyage { gap: 16px; padding: 0 12px; background: var(--sea-deep); color: var(--paper); border-radius: 3px; text-decoration: none; font-weight: 600; } .voyage-end .next-voyage:hover { background: var(--accent); } /* the day's plate: an engraving, ink only (atlas/plates.py), so it sits on the panel's own paper */ .plate { width: min(100%, 240px); align-self: center; margin: 8px 0; } .plate img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; animation: plate-in var(--motion-ui) var(--motion-ease); } @keyframes plate-in { from { opacity: 0; } } .plain { max-width: 100ch; margin: 0 0 8px; font-size: 15px; line-height: 1.6; } .none { margin: 10px 0 0; padding: 10px var(--gutter); font-size: 13px; font-style: italic; color: var(--ink-soft); } /* no entry, no voyages */ .disclosure-content { display: flow-root; } .transcription-dialog { --transcript-gutter: clamp(16px, 4vw, 24px); width: 600px; max-width: calc(100% - 24px); max-height: min(760px, calc(100dvh - 24px)); margin: auto; padding: 0; border: 1px solid var(--paper-edge); border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.24); overflow: hidden; opacity: 0; translate: 0 6px; transition: opacity var(--motion-ui) var(--motion-ease), translate var(--motion-ui) var(--motion-ease), display var(--motion-ui) allow-discrete, overlay var(--motion-ui) allow-discrete; } .transcription-dialog[open] { display: flex; flex-direction: column; opacity: 1; translate: 0 0; } .transcription-dialog::backdrop { background: rgba(18, 36, 38, 0.5); opacity: 0; transition: opacity var(--motion-ui) var(--motion-ease), display var(--motion-ui) allow-discrete, overlay var(--motion-ui) allow-discrete; } .transcription-dialog[open]::backdrop { opacity: 1; } @starting-style { .transcription-dialog[open] { opacity: 0; translate: 0 6px; } .transcription-dialog[open]::backdrop { opacity: 0; } } .transcription-head { display: flex; align-items: flex-start; justify-content: space-between; flex: none; gap: 12px; padding: 16px var(--transcript-gutter) 14px; border-bottom: 1px solid var(--paper-edge); } .transcription-head > div { min-width: 0; } .transcription-head h2 { margin: 0; font-size: 17px; font-weight: 600; } .transcription-head p { margin: 3px 0 0; font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; } .transcription-head button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -4px 0; padding: 0; border: 0; border-radius: 4px; background: none; font-size: 24px; line-height: 1; cursor: pointer; } .transcription-head button:hover { background: var(--hover); } .transcription-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px var(--transcript-gutter) 20px; } .transcription-body:focus-visible { outline-offset: -3px; } .transcript-note { margin: 0 0 10px; font-size: 11px; color: var(--ink-soft); } .transcript { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; text-wrap: pretty; } .transcript p { margin: 0; } .transcript p + p { margin-top: 12px; } /* ---------- map ---------- */ .stage { grid-column: 1; grid-row: 3; position: relative; min-height: 0; min-width: 0; overflow: hidden; background: var(--sea); container-type: size; } .map { position: absolute; inset: 0; background: var(--sea); } .world-view { position: absolute; left: var(--gutter); bottom: 12px; min-height: 36px; padding: 6px 11px; border: 1px solid var(--sea-line); border-radius: 4px; background: var(--sea-deep); color: var(--ivory-dim); font-size: 12px; cursor: pointer; z-index: 2; } .world-view:hover { color: var(--ivory); } body[data-mode="voyage"] .world-view { display: none; } .corner { position: absolute; right: var(--gutter); bottom: 12px; display: flex; z-index: 2; } .key-btn, .key { background: var(--sea-deep); color: var(--ivory); border: 1px solid var(--sea-line); border-radius: 4px; font-size: 12px; } .key-btn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer; } /* its mark alone, the size of the zoom buttons; "Map key" is its name (index.html) */ .key-icon { width: 16px; height: 16px; fill: var(--ivory); } .key { position: absolute; right: 0; bottom: calc(100% + 6px); width: max-content; max-width: calc(100vw - 24px); max-height: calc(100cqh - 60px); overflow-y: auto; padding: 10px 12px; color: var(--ivory-dim); } .key { --key-from: 0 6px; transition: opacity var(--motion-ui) var(--motion-ease), translate var(--motion-ui) var(--motion-ease), display var(--motion-ui) allow-discrete; } .key[hidden] { display: none; opacity: 0; translate: var(--key-from); } @starting-style { .key:not([hidden]) { opacity: 0; translate: var(--key-from); } } .key-row { display: flex; align-items: center; gap: 9px; min-height: 20px; } .key-head { margin: 10px 0 3px; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; } .key-head:first-child { margin-top: 0; } body[data-mode="voyage"] .key-section + .key-section { margin-top: 10px; } body[data-mode="index"][data-view="list"] .key-section:not([data-key="voyage"]), body[data-mode="index"][data-view="whales"] .key-section:not([data-key="whales"]), body[data-mode="index"][data-view="moments"] .key-section:not([data-key="moments"]) { display: none; } .swatch { width: 26px; height: 0; border-top: 2px dashed var(--track); } .key .bead { margin: 0 8.5px; } .maplibregl-ctrl-group { background: var(--paper); border: 1px solid var(--paper-edge); } .maplibregl-ctrl-group:not(:empty) { box-shadow: none; } .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 12px var(--gutter) 0 0; } .maplibregl-ctrl-group button { width: 32px; height: 32px; } .maplibregl-ctrl-group button + button { border-top-color: var(--paper-edge); } .maplibregl-ctrl-group button:focus:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; box-shadow: none; } .maplibregl-ctrl-icon { opacity: 0.8; } /* the ship (app.js): ivory like the stamps, with a dark edge so she reads over the track. She rocks on a swell that runs aft, heels a little and shows a wake while under way, and comes about (a flip) when the voyage turns east or west. Her waterline, 7px above her box's foot, sits on the day's position. */ .ship { pointer-events: none; } body[data-mode="index"] .ship { display: none; } .ship-art { display: block; width: 46px; height: 38.33px; overflow: visible; transition: transform var(--motion-camera) ease-in-out; filter: drop-shadow(0 0 1px rgba(16, 38, 43, 0.95)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } .ship.west .ship-art { transform: scaleX(-1); } .ship-hull, .ship-sails { fill: var(--ivory); } .ship-rig { fill: none; stroke: var(--ivory); stroke-width: 1.1; stroke-linecap: round; } .ship-band { stroke: var(--sea-deep); stroke-width: 0.9; } .ship-pennant { fill: var(--track); transform-box: fill-box; transform-origin: 0 50%; animation: ship-pennant 0.9s ease-in-out infinite alternate; } .ship-swell { fill: none; stroke: var(--ivory); stroke-width: 1; stroke-linecap: round; opacity: 0.7; animation: ship-swell 2.4s linear infinite; } .ship-wake { fill: none; stroke: var(--ivory); stroke-width: 0.9; stroke-linecap: round; opacity: 0; transition: opacity var(--motion-ui) var(--motion-ease); } .ship.sailing .ship-wake { opacity: 0.8; } .ship-rock, .ship-heel { transform-box: view-box; transform-origin: 24px 33px; } .ship-rock { animation: ship-rock 3.6s ease-in-out infinite; } .ship-heel { transition: transform var(--motion-camera) var(--motion-ease); } .ship.sailing .ship-heel { transform: rotate(2deg); } @keyframes ship-rock { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(0.5px); } } @keyframes ship-swell { to { transform: translateX(-6px); } } @keyframes ship-pennant { from { transform: skewY(-7deg) scaleX(0.9); } to { transform: skewY(5deg) scaleX(1.05); } } body:not(.playing) :is(.ship-rock, .ship-swell, .ship-pennant) { animation-play-state: paused; } /* still when the voyage is paused (WCAG 2.2.2) */ /* One navigation bar connects the chart and the entry. */ .time { grid-column: 1 / -1; grid-row: 4; height: var(--player-h); display: grid; grid-template-columns: 32px 34px 32px auto minmax(0, 1fr) auto; /* back, Play, on, the speed, the timeline, the day */ align-items: center; gap: 8px; padding: 0 var(--gutter) env(safe-area-inset-bottom, 0px); background: var(--paper); border-top: 1px solid var(--paper-edge); color: var(--ink); min-width: 0; position: relative; z-index: 3; } body[data-mode="index"] .time { display: none; } .time > button { justify-self: center; } .timeline-wrap { position: relative; min-width: 0; } .play { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--sea-deep); color: var(--paper); cursor: pointer; transition: background-color var(--motion-ui) var(--motion-ease), transform var(--motion-ui) var(--motion-ease); } .play svg { width: 12px; height: 12px; fill: currentColor; } .play .icon-play { margin-left: 2px; } /* optically centre the triangle */ .play .icon-pause { display: none; } @media (hover: hover) { .play:hover { background: var(--accent); } } .play:active { transform: scale(0.95); } body.playing .play { background: var(--accent); } /* app.js: play, stop */ body.playing .play .icon-play { display: none; } body.playing .play .icon-pause { display: block; } /* the playback speed, a teal pill beside Play: tinted at the log's own pace, filled at any other */ .speed { position: relative; min-width: 36px; height: 24px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(48, 94, 95, 0.12); /* the accent, an eighth */ color: var(--accent); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; cursor: pointer; } .speed:not([data-speed="1"]) { background: var(--accent); color: var(--paper); } .speed:active { background: rgba(48, 94, 95, 0.22); } .speed:not([data-speed="1"]):active { background: var(--sea-deep); } @media (hover: hover) { .speed:hover { background: rgba(48, 94, 95, 0.22); } .speed:not([data-speed="1"]):hover { background: var(--sea-deep); } } .readout { min-width: 0; font-size: 11px; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: center; white-space: nowrap; } .time > .readout { padding-left: 14px; border-left: 1px solid var(--paper-edge); } /* set apart from the voyage's last date */ .timeline { width: 100%; height: 40px; display: block; cursor: grab; touch-action: none; } /* its track on its middle, its dates at its ends (app.js: drawTimeline) */ .timeline:active { cursor: grabbing; } .tl-tip { position: absolute; bottom: calc(100% + 6px); max-width: 300px; padding: 8px 11px 9px; background: var(--sea-deep); color: var(--ivory); border: 1px solid var(--sea-line); border-radius: 3px; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6); font-size: 13px; line-height: 1.35; pointer-events: none; } .tl-tip p { margin: 0; } .tl-tip .tip-date { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ivory-dim); margin-bottom: 4px; } .tl-tip ul { list-style: none; margin: 0; padding: 0; } .tl-tip li { display: flex; align-items: center; gap: 7px; padding: 1px 0; } .tl-tip li .glyph { width: 18px; height: 13px; flex: none; } .tl-tip li .bead { margin: 0 4.5px; } .tl-tip .muted, .tl-tip .tip-plain { color: var(--ivory-dim); } .step { width: 32px; height: 36px; border: 0; border-radius: 50%; /* round, as Play is */ color: var(--ink-soft); background: none; cursor: pointer; font-size: 18px; line-height: 1; } .step:disabled { opacity: 0.3; cursor: default; } .step:active { color: var(--ink); background: var(--hover); } @media (hover: hover) { .step:hover { color: var(--ink); background: var(--hover); } } /* ---------- discovery: filters, result rows, and point details ---------- */ .mv-lede { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-soft); } .mv-kinds { display: grid; margin: 4px -4px 0; } .mv-kind { display: grid; grid-template-columns: 13px 18px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 26px; padding: 3px 4px; border: 0; border-radius: 3px; background: none; font-size: 11.5px; text-align: left; cursor: pointer; } .mv-kind:active { background: var(--hover); } @media (hover: hover) { .mv-kind:hover { background: var(--hover); } } .mv-check { width: 13px; height: 13px; border: 1.5px solid var(--edge); border-radius: 2px; } .mv-kind[aria-pressed="true"] .mv-check { border-color: var(--ink); background: var(--ink) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.3l2 2 4-4.6' fill='none' stroke='%23f7f6f2' stroke-width='1.6'/%3E%3C/svg%3E") center / 10px no-repeat; } .mv-kind .glyph, .mv-item .glyph { width: 18px; height: 14px; } .mv-kind .bead { justify-self: center; } .mv-kind[aria-pressed="false"] :is(.glyph, .bead) { opacity: 0.45; } .mv-kind[aria-pressed="false"] .mv-kind-l { color: var(--ink-soft); } /* dimmed as text can be: 4.5:1 (WCAG 1.4.3) */ .mv-kind-n { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--ink-soft); } .mv-list { list-style: none; margin: 0; padding: 0 0 6px; } .mv-list:empty { display: none; } .mv-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 6px; padding: 6px var(--gutter); font-size: 12.5px; line-height: 1.35; text-decoration: none; } .mv-item:focus-visible { background: var(--hover); } @media (hover: hover) { .mv-item:hover { background: var(--hover); } } .mv-item .glyph { margin-top: 1px; } .mv-item .bead, .mv-day .bead { margin: 5px auto 0; } .mv-t { display: block; } .mv-d { display: block; font-size: 11.5px; color: var(--ink-soft); } /* On this day: the days before and after, under the date, and the welcome's way to it */ .day-steps { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; font-size: 12.5px; } .day-steps a, .welcome-today { color: var(--accent); font-weight: 500; text-decoration: none; } .day-steps a:hover, .welcome-today:hover { text-decoration: underline; text-underline-offset: 3px; } .welcome-today { display: inline-block; margin-top: 10px; font-size: 13px; } .mv-meta { display: block; margin-top: 1px; font-size: 11px; color: var(--ink-soft); } /* The heatmap's compact key; the explanation stays with its filters. */ .mv-ramp { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 11px; color: var(--ink-soft); } .mv-ramp i { flex: 1; height: 5px; border-radius: 3px; background-color: var(--sea); } /* the years: a bar for each year (app.js draws them, drawYears) under two handles on one track, the range inputs laid over the bars with only their knobs taking the pointer, so a click between them reaches the bars */ .mv-years { margin-top: 8px; } .mv-years-head { display: flex; align-items: baseline; gap: 10px; min-height: 20px; margin: 0; } .mv-years-head .label { margin: 0; } .mv-years-v { font-variant-numeric: tabular-nums; font-size: 12px; } .mv-years-all { margin-left: auto; padding: 0 0 1px; border: 0; border-bottom: 1px solid var(--ink-line); background: none; font-size: 12px; color: var(--ink-soft); cursor: pointer; } .mv-years-all:hover, .mv-years-all:active { color: var(--ink); border-bottom-color: var(--ink); } .mv-hist { position: relative; height: 46px; margin-top: 4px; } .mv-hist canvas { display: block; width: 100%; height: 38px; cursor: pointer; } .mv-hist input { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 16px; margin: 0; background: none; appearance: none; -webkit-appearance: none; pointer-events: none; } .mv-hist input::-webkit-slider-runnable-track { height: 16px; background: none; } .mv-hist input::-moz-range-track { background: none; } .mv-hist input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: ew-resize; width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-2); } .mv-hist input::-moz-range-thumb { pointer-events: auto; cursor: ew-resize; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-2); } .mv-hist input:focus-visible { outline: none; } .mv-hist input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); } .mv-hist input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); } .mv-years-ends { display: flex; justify-content: space-between; margin: 2px 0 0; padding: 0 2px; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--ink-soft); } /* a point on the map: what happened there, on the panel's paper; open on hover, kept open (and its links live) on a click */ .mv-pop .maplibregl-popup-content { /* Leave room for MapLibre to anchor the preview on either side of a point, even on a small chart. */ max-width: calc(66.6667cqw - 16px); max-height: calc(50cqh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 9px 12px 10px; background: var(--paper); color: var(--ink); border-radius: 4px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.75); font: 14px/1.35 var(--body); } .mv-pop .maplibregl-popup-tip { display: none; } /* MapLibre's is white */ .mv-pop:not(.pinned) { pointer-events: none; } .mv-day ul { list-style: none; margin: 0; padding: 0; } .mv-day li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 7px; padding: 1px 0; } .mv-day .glyph { width: 18px; height: 13px; margin-top: 2px; } .mv-day + .mv-day { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--paper-edge); } .mv-day a { color: var(--ink); } .mv-go { display: inline-block; margin: 3px 0 0 25px; font-size: 12.5px; } .mv-pop:not(.pinned) .mv-go { color: var(--ink-soft); text-decoration: none; } .mv-here { margin: 8px 0 0; font-size: 12.5px; font-style: italic; color: var(--ink-soft); } .day > .none { padding: 0; } /* Optional discovery filters stay next to the title. */ .side-head:has(.filter-disclosure) > .wordmark { margin: 0 112px 10px 0; } /* room for the Filters pill across from it */ .filter-disclosure { min-height: 0; font-size: 12px; } .filter-disclosure::details-content { height: 100%; } .filter-disclosure .disclosure-content { max-height: 100%; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; } @supports not selector(::details-content) { .side-head:has(.filter-disclosure) { display: block; overflow-y: auto; } } /* Filters: an outlined teal pill across from the panel's title, a sliders mark before it and the filters in force as a badge after it; filled while the filters are open */ .filter-summary { position: absolute; top: 13px; right: var(--gutter); display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--paper-edge); border-radius: 999px; background: var(--paper); font-size: 12.5px; font-weight: 500; color: var(--accent); cursor: pointer; white-space: nowrap; list-style: none; } .filter-summary::-webkit-details-marker { display: none; } .filter-summary::before { content: "" / ""; width: 14px; height: 14px; background: currentColor; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h12M2 8h12M2 12h12' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='5.5' cy='4' r='2'/%3E%3Ccircle cx='10.5' cy='8' r='2'/%3E%3Ccircle cx='6.5' cy='12' r='2'/%3E%3C/svg%3E") center / contain no-repeat; } .filter-summary:hover { border-color: var(--accent); } .filter-disclosure[open] .filter-summary { border-color: var(--accent); background: var(--accent); color: var(--paper); } .filter-summary span { display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--paper); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .filter-disclosure[open] .filter-summary span { background: var(--paper); color: var(--accent); } .filter-summary span:empty { display: none; } .filter-disclosure .disclosure-content::after { content: ""; display: block; height: 6px; } .active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; } .active-filters:empty { display: none; } .active-filters button { max-width: 100%; min-width: 0; padding: 3px 10px; border: 1px solid var(--paper-edge); border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; } .active-filters button:hover { color: var(--ink); border-color: var(--edge); } .show-more { display: block; width: calc(100% - 2 * var(--gutter)); min-height: 34px; margin: 6px var(--gutter) 12px; border: 1px solid var(--paper-edge); border-radius: 3px; background: none; font-size: 12px; color: var(--ink-soft); cursor: pointer; } .show-more:hover { color: var(--ink); background: var(--hover); } /* The desktop entry follows the ship; its transform shares the ship's animation frames. */ @media (min-width: 1001px) and (orientation: landscape) and (hover: hover) and (pointer: fine) { body[data-mode="voyage"] .stage { grid-column: 1 / -1; } body[data-mode="voyage"] .side { grid-column: 1 / -1; place-self: start; max-height: calc(100% - 80px); overflow: visible; border: 1px solid var(--rule-ink); border-radius: 0; box-shadow: var(--neatline), 0 4px 18px rgba(0, 0, 0, 0.22); translate: clamp(16px, calc(var(--reader-x, 16px) + var(--reader-shift)), calc(100vw - var(--side-w) - 64px)) var(--reader-y, 16px); } body[data-mode="voyage"] .side-body { flex: 0 1 auto; border-radius: 0 0 4px 4px; } /* the pointer to the ship, a lozenge of the card's paper ruled in the neatline's ink, centred on its outer line (its top counts from the card's outer edge) */ body[data-mode="voyage"] .side[data-tethered="true"]::after { content: ""; position: absolute; left: -12px; top: calc(var(--reader-tail-y) - 8px); width: 14px; height: 14px; background: var(--paper); border: 1.5px solid var(--rule-ink); transform: rotate(45deg); pointer-events: none; } body[data-mode="voyage"] .side[data-anchor="left"]::after { left: auto; right: -12px; } body[data-mode="voyage"] .side[data-shifting]::after { opacity: 0; } } /* Narrow screens use separate map and reader areas, stacked in portrait. */ @media (max-width: 1000px), (orientation: portrait), (hover: none), (pointer: coarse) { :root { --gutter: 16px; --side-w: 340px; } body[data-mode="voyage"] { background: var(--sea); } body[data-mode="voyage"] .side { align-self: start; max-height: 100%; } body[data-mode="voyage"] .side-body { flex: 0 1 auto; } .day > .plain:last-child { margin-bottom: 0; } } /* Keep focused fields large enough for Safari to leave the page at its current scale. */ @media (max-width: 1000px), (hover: none), (pointer: coarse) { .search, .pick, .sort-pick { font-size: 16px; } .list-bar { font-size: 13px; } /* nearer the pick's 16px on the same line */ } @media (orientation: portrait) { body[data-mode="index"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--header-h) min(34dvh, 360px) minmax(0, 1fr); } body[data-mode="index"] .stage { grid-row: 2; } body[data-mode="index"] .side { grid-column: 1; grid-row: 3; width: auto; border: 0; border-top: 1px solid var(--paper-edge); } /* Overlay the reader so its height animation never resizes the map canvas. */ body[data-mode="voyage"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--header-h) auto minmax(120px, 1fr) var(--player-h); } body[data-mode="voyage"] .side { grid-column: 1; grid-row: 3; align-self: end; width: auto; max-height: 52dvh; border: 0; border-top: 1px solid var(--rule-ink); box-shadow: var(--neatline-top); } body[data-mode="voyage"] .corner { bottom: calc(var(--reader-height, 0px) + 18px); } /* over the sheet's frame */ /* Leave the reader, touch-sized key button, and chart edge clear when the legend scrolls. */ body[data-mode="voyage"] .key { max-height: calc(100cqh - var(--reader-height, 0px) - 84px); } } /* Use the width of portrait menus before making their text or touch targets smaller. */ @media (min-width: 360px) and (orientation: portrait) { .mv-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin-inline: 0; } .mv-kind { grid-template-columns: 13px 14px minmax(0, 1fr) auto; gap: 4px; min-height: 40px; padding: 4px 0; } .mv-kind .glyph { width: 14px; } .mv-kind-l { line-height: 1.3; } } @media (min-width: 701px) and (orientation: portrait) { #mv-filters .disclosure-content { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; gap: 0 20px; } #mv-filters .disclosure-content::after { display: none; } .mv-lede { grid-column: 1 / -1; margin-top: 4px; } #voyages { --ledger: minmax(160px, 1fr) minmax(180px, 1.25fr) 42px var(--metric-w, 58px); } .ledger-head .lh-meta { display: block; } .voyage-item { align-items: center; min-height: 44px; padding-block: 5px; } .voyage-item .vi-name { grid-column: 1; grid-row: 1; } .voyage-item .vi-n { grid-row: 1; } .voyage-item .vi-meta { grid-column: 2; grid-row: 1; } .mv-item { align-items: center; min-height: 44px; padding-block: 5px; } .mv-item > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; } .mv-item :is(.mv-t, .mv-d) { grid-column: 1; } .mv-item .mv-meta { grid-column: 2; grid-row: 1 / 3; margin: 0; text-align: right; } } @media (max-width: 700px) { :root { --gutter: 14px; --time-h: 98px; } .app-header { gap: 8px; --bar-pad: 12px; } .app-start { flex: 1; gap: 8px; } .app-brand { min-height: 40px; } .app-brand span { display: none; } .app-brand img { width: 28px; height: 28px; } .app-nav { flex: 1; min-width: 0; } .app-nav a { flex: 1; padding-inline: 8px; } .app-end { margin-left: 0; } .entry-head { padding: 10px var(--gutter) 8px; } .entry-date-row { justify-content: flex-start; } .where { margin-top: 4px; font-size: 11px; } .day-date { font-size: 18px; } body[data-mode="voyage"] .day { padding: 10px var(--gutter); } .plain { font-size: 13px; line-height: 1.5; } /* the timeline a row of its own over the controls, with room above it for its years */ .time { grid-template-columns: 44px 44px 44px auto minmax(0, 1fr); grid-template-rows: 40px 44px; gap: 0 4px; padding: 6px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px)); } .timeline-wrap { grid-column: 1 / -1; grid-row: 1; } .time > :not(.timeline-wrap) { grid-row: 2; } .readout { justify-self: end; } .world-view { bottom: 10px; } .corner { right: var(--gutter); bottom: 10px; } .maplibregl-ctrl-top-right { display: none; } } @media (max-width: 359px) { :root { --gutter: 10px; } } /* A phone's bar is the site's name and the menu, the flourish between them: its two loops where they fit, a ruled line between two dots on the narrowest screens; so is a voyage's, at 800-899px, around her title (below 800px, her title is a row of its own). */ @media (max-width: 459px) { .app-brand span { display: inline; } :is(.app-nav, .app-about) { display: none; } .menu-btn { display: flex; } .app-start::after { content: ""; flex: 1; min-width: 0; height: 26px; margin-inline: 2px; background: var(--fl-end-l) left center / 64px 26px no-repeat, var(--fl-end-r) right center / 64px 26px no-repeat, var(--fl-rule) center / calc(100% - 100px) 26px no-repeat; } } @media (max-width: 359px) { .app-start::after { background: var(--fl-tip-l) left center / 14px 26px no-repeat, var(--fl-tip-r) right center / 14px 26px no-repeat, var(--fl-rule) center / calc(100% - 20px) 26px no-repeat; } } @media (min-width: 800px) and (max-width: 899px) { body[data-mode="voyage"] :is(.app-nav, .app-about) { display: none; } body[data-mode="voyage"] .menu-btn { display: flex; } } /* Keep the same split compact on short landscape screens. */ @media (max-height: 500px) and (orientation: landscape) { :root { --time-h: 50px; --side-w: 46vw; } .entry-head { padding: 8px var(--gutter) 6px; } body[data-mode="voyage"] .day { padding: 10px var(--gutter); } .time { grid-template-columns: 32px 34px 32px auto minmax(0, 1fr) auto; grid-template-rows: 1fr; gap: 8px; padding-bottom: env(safe-area-inset-bottom, 0px); } .time > :not(.timeline-wrap) { grid-row: 1; } .timeline-wrap { grid-column: 5; grid-row: 1; } .plain { font-size: 13px; } } /* A fixed entry panel keeps phone entries readable while the map follows the ship. */ @media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) { body[data-mode="voyage"] .side { width: auto; margin: 0 14px 14px; overflow: visible; border: 1px solid var(--rule-ink); border-radius: 0; box-shadow: var(--neatline); } body[data-mode="voyage"] .side-body { border-radius: 0 0 4px 4px; } } @media (max-width: 700px) and (orientation: portrait) { .time > .readout { padding-left: 0; border-left: 0; } /* alone at the end of the controls' row */ body[data-mode="voyage"] .side { max-height: min(48dvh, calc(100dvh - var(--header-h) - var(--player-h) - 200px)); } body[data-mode="voyage"] .corner { bottom: calc(var(--reader-height, 0px) + 30px); } /* over the card's margin and frame */ } @media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) { body[data-mode="voyage"] .side { align-self: start; max-height: calc(100% - 28px); margin-top: 14px; } } /* The cards and panels over the chart are framed with a neatline, as most old maps were: a hairline at their edge, paper, then a slightly heavier line (box shadows, so the frame takes no room); along the one edge a panel, a portrait sheet, or the top bar turns to the chart, that edge alone. The welcome card has the top bar's flourish under its title. */ :root { --rule-ink: #2f3b3c; --neatline: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--rule-ink); --neatline-left: -4px 0 0 var(--paper), -5.5px 0 0 var(--rule-ink); --neatline-top: 0 -4px 0 var(--paper), 0 -5.5px 0 var(--rule-ink); --neatline-bottom: 0 4px 0 var(--paper), 0 5.5px 0 var(--rule-ink); /* the top bar's */ } body.home { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--header-h) minmax(0, 1fr); } body.home .stage { grid-column: 1; grid-row: 2; } body.home :is(.world-view, .corner, .maplibregl-control-container) { display: none; } body.home .side { --gutter: 24px; grid-column: 1; grid-row: 2; place-self: center start; width: max-content; min-width: min(340px, calc(100% - 32px)); max-width: calc(100% - 32px); max-height: calc(100% - 32px); /* wide enough for the voyage's name on one line */ margin-inline: clamp(16px, 3vw, 48px); border: 1px solid var(--rule-ink); border-radius: 0; box-shadow: var(--neatline), 0 4px 18px rgba(0, 0, 0, 0.22); } body.home .side-head { padding: 22px var(--gutter) 8px; border: 0; } body.home .side-head::after { content: ""; display: block; height: 26px; margin: 10px 0 -2px; background: var(--fl-centre) center / 104px 26px no-repeat, var(--fl-end-l) left center / 64px 26px no-repeat, var(--fl-end-r) right center / 64px 26px no-repeat, var(--fl-rule) center / calc(100% - 100px) 26px no-repeat; } body.home .wordmark { margin: 0; font-family: "Besley", Georgia, serif; font-size: clamp(30px, 3vw, 34px); font-weight: 500; line-height: 1.25; letter-spacing: -0.04em; } .welcome-meta { margin: 0 0 10px; color: var(--ink-soft); font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; } .welcome-content { padding: 6px var(--gutter) 24px; } .welcome-lede { margin: 0; max-width: 28ch; font-size: 16px; line-height: 1.5; color: var(--ink-soft); } .welcome-start { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; margin-top: 24px; padding: 10px 12px; border-radius: 3px; background: var(--accent); color: var(--paper); font-size: 14px; font-weight: 600; text-decoration: none; } .welcome-start:hover { background: var(--sea-deep); } .welcome-voyage { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); white-space: nowrap; } .welcome-voyage > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* app.js: nameWelcomeVoyage shortens it first */ /* the voyage's line as the chart draws it: ivory on the sea */ .welcome-track { flex: none; width: 20px; height: 12px; border-radius: 2px; background: linear-gradient(var(--ivory), var(--ivory)) center / 12px 2px no-repeat, var(--sea); } /* In portrait, keep the chart visible above the welcome instead of hiding it behind a card. */ @media (orientation: portrait) { body.home { grid-template-rows: var(--header-h) minmax(0, 1fr) auto; background: var(--paper); } /* one centred column, 440px or as wide as the voyage's name needs, up to the screen's width */ body.home .side { display: grid; grid-template-columns: minmax(min(440px, 100%), max-content); grid-template-rows: auto minmax(0, 1fr); justify-content: center; grid-row: 3; width: 100%; min-width: 0; max-width: none; max-height: 60dvh; margin: 0; border: 0; border-top: 1px solid var(--rule-ink); border-radius: 0; box-shadow: var(--neatline-top); padding-bottom: env(safe-area-inset-bottom, 0px); } body.home .side-head { max-height: none; } /* its row is as tall as it is; the body scrolls if the card must */ } /* The panels of the list, Moments, and Whales have the neatline down the edge they turn to the chart (their left, or their top in portrait), and are titled in the welcome's book face. */ body[data-mode="index"]:not(.home) .side { border: 0; border-left: 1px solid var(--rule-ink); box-shadow: var(--neatline-left); } body[data-mode="index"]:not(.home) .wordmark { font-family: "Besley", Georgia, serif; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } @media (orientation: portrait) { body[data-mode="index"]:not(.home) .side { border: 0; border-top: 1px solid var(--rule-ink); box-shadow: var(--neatline-top); } } @media (prefers-reduced-motion: reduce) { .ship-rock, .ship-swell, .ship-pennant { animation: none; } .veil-mark { animation: mark-in var(--motion-ui) var(--motion-ease) 0.6s backwards; } .ship-art, .ship-heel, .ship-wake, .key, .side, .time, .play, .app-menu { transition: none !important; } .transcription-dialog, .transcription-dialog::backdrop { transition: none !important; } .plate img { animation: none; } body.loading .side::before { width: 100%; animation: none; } } /* Touch targets grow within their own rows, without overlapping neighboring controls. */ @media (pointer: coarse) { :root { --header-h: 44px; } .mv-kind { min-height: 40px; } .search, .list-bar .sort-pick { min-height: 32px; } .voyage-item, .mv-item { min-height: 44px; } .pick { min-height: 32px; } .filter-disclosure summary { min-height: 32px; padding-block: 7px; } .app-nav a, .app-about, .app-brand, .menu-btn { min-height: 44px; } .lh { position: relative; } .lh::before { content: ""; position: absolute; inset: -5px 0; } .step { width: 44px; min-height: 44px; } :is(.play, .speed)::before { content: ""; position: absolute; inset: -5px; } .original-link::before { content: ""; position: absolute; inset: -8px -4px; } /* a finger's reach, the pill its own size */ .world-view { min-height: 44px; } .key-btn { width: 40px; height: 40px; } .key-btn::before { content: ""; position: absolute; inset: -2px; } .maplibregl-ctrl-group button { width: 44px; height: 44px; } } @media (pointer: coarse) and (min-width: 701px), (pointer: coarse) and (max-height: 500px) and (orientation: landscape) { :root { --time-h: 56px; } .time { grid-template-columns: 44px 44px 44px auto minmax(0, 1fr) auto; gap: 4px; } }