:root {
  --wc-ink: #071425;
  --wc-night: #0c2138;
  --wc-tide: #17495a;
  --wc-sea: #62c4bd;
  --wc-coral: #ff8d73;
  --wc-moon: #f3eedf;
  --wc-fog: #d3ddd7;
  --wc-paper: #fffdf7;
  --wc-rule: color-mix(in srgb, var(--wc-ink) 14%, transparent);
  --wc-serif: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, serif;
  --wc-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --wc-measure: 70ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--wc-paper); color: var(--wc-ink); font-family: var(--wc-sans); font-size: 16px; line-height: 1.8; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--wc-coral); outline-offset: 4px; }

.wc-skip { position: fixed; z-index: 20; top: .75rem; left: 50%; transform: translate(-50%, -180%); padding: .5rem 1rem; color: var(--wc-ink); background: var(--wc-moon); font-weight: 700; transition: transform .2s ease; }
.wc-skip:focus { transform: translate(-50%, 0); }
.wc-atlas { min-height: 100vh; overflow: clip; background: radial-gradient(circle at 92% 0%, rgb(98 196 189 / .16), transparent 27rem), var(--wc-paper); }

.wc-beacon { color: var(--wc-moon); background: var(--wc-ink); position: relative; isolation: isolate; }
.wc-beacon::before, .wc-beacon::after { position: absolute; content: ""; z-index: -1; pointer-events: none; }
.wc-beacon::before { inset: 0; opacity: .55; background-image: linear-gradient(90deg, transparent 49.8%, rgb(243 238 223 / .09) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgb(243 238 223 / .07) 50%, transparent 50.2%); background-size: 5rem 5rem; mask-image: linear-gradient(90deg, black, transparent 88%); }
.wc-beacon::after { width: 28rem; height: 28rem; top: -17rem; right: -9rem; border: 1px solid rgb(98 196 189 / .46); border-radius: 50%; box-shadow: 0 0 0 3rem rgb(98 196 189 / .05), 0 0 0 7rem rgb(98 196 189 / .04); }
.wc-beacon__mast { width: min(1240px, calc(100% - 2.5rem)); min-height: 13.5rem; margin: auto; padding: 1.4rem 0 2.3rem; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eyebrow signal" "brand signal"; gap: .7rem 2rem; align-content: center; }
.wc-beacon__eyebrow, .wc-kicker { margin: 0; font-size: .67rem; line-height: 1.45; letter-spacing: .18em; font-weight: 750; }
.wc-beacon__eyebrow { grid-area: eyebrow; color: var(--wc-sea); }
.wc-beacon__eyebrow span { display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: var(--wc-coral); box-shadow: 0 0 0 .28rem rgb(255 141 115 / .14); }
.wc-beacon__brand { grid-area: brand; display: inline-flex; gap: .75rem; align-items: center; width: fit-content; text-decoration: none; font-family: var(--wc-serif); font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.06em; line-height: 1; }
.wc-beacon__brand img { width: 2.85rem; height: 2.85rem; object-fit: contain; border: 1px solid rgb(243 238 223 / .25); border-radius: .45rem; background: #fff; }
.wc-beacon__brand span span { color: var(--wc-sea); }
.wc-beacon__signal { grid-area: signal; align-self: center; display: flex; align-items: center; gap: 1rem; }
.wc-beacon__signal p { max-width: 10rem; margin: 0; color: rgb(243 238 223 / .72); font-size: .73rem; line-height: 1.5; }
.wc-waymark { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; padding: .72rem 1rem; border: 1px solid var(--wc-ink); color: var(--wc-ink); background: transparent; text-decoration: none; font-size: .76rem; font-weight: 760; letter-spacing: .04em; transition: transform .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease; }
.wc-waymark span { font-size: 1.1em; transition: transform .22s ease; }
.wc-waymark:hover { transform: translateY(-3px); color: var(--wc-paper); background: var(--wc-ink); box-shadow: 5px 5px 0 var(--wc-coral); }
.wc-waymark:hover span { transform: translateX(3px); }
.wc-waymark--outbound { color: var(--wc-ink); border-color: var(--wc-sea); background: var(--wc-sea); }
.wc-waymark--outbound:hover { background: var(--wc-coral); border-color: var(--wc-coral); color: var(--wc-ink); box-shadow: 5px 5px 0 var(--wc-moon); }
.wc-tidepath { width: min(1240px, calc(100% - 2.5rem)); margin: auto; border-top: 1px solid rgb(243 238 223 / .16); }
.wc-tidepath ol { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.wc-tidepath a { display: flex; gap: .65rem; padding: .85rem 1.1rem .85rem 0; margin-right: 1.2rem; color: rgb(243 238 223 / .56); text-decoration: none; font-size: .73rem; letter-spacing: .08em; }
.wc-tidepath a[aria-current="page"], .wc-tidepath a:hover { color: var(--wc-moon); }
.wc-tidepath a[aria-current="page"] span::after { content: ""; display: inline-block; width: .35rem; height: .35rem; margin-left: .35rem; vertical-align: middle; border-radius: 50%; background: var(--wc-coral); }

main { width: min(1240px, calc(100% - 2.5rem)); margin: 0 auto; }
.wc-coordinate-field { padding: clamp(2rem, 5vw, 5.5rem) 0 4.5rem; }
.wc-coordinate-field__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); gap: 2rem; align-items: end; padding-bottom: 2rem; border-bottom: 1px solid var(--wc-rule); }
.wc-kicker { color: var(--wc-tide); }
.wc-coordinate-field__header h2, .wc-nightloop__head h2 { max-width: 20ch; margin: .6rem 0 0; font-family: var(--wc-serif); font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.1; font-weight: 500; letter-spacing: -.045em; }
.wc-coordinate-field__header > p { margin: 0; color: color-mix(in srgb, var(--wc-ink) 70%, transparent); font-size: .9rem; }
.wc-coordinate-field__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem); gap: clamp(2rem, 6vw, 7rem); align-items: start; padding-top: 2.5rem; }
.wc-coordinate { position: sticky; top: 1.5rem; }
.wc-coordinate__view { position: relative; margin: 0; overflow: hidden; background: var(--wc-night); }
.wc-coordinate__view::after { position: absolute; content: ""; inset: 0; background: linear-gradient(160deg, transparent 52%, rgb(7 20 37 / .48)); pointer-events: none; }
.wc-coordinate__view img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(.78) contrast(1.05); transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.wc-coordinate__view:hover img { transform: scale(1.055); filter: saturate(1) contrast(1.06); }
.wc-coordinate__view figcaption { position: absolute; z-index: 1; right: 1rem; bottom: .9rem; left: 1rem; color: var(--wc-moon); font-size: .7rem; letter-spacing: .07em; }
.wc-coordinate__view figcaption span { color: var(--wc-sea); }
.wc-coordinate__note { margin: -1px 1.4rem 0 0; padding: 1.4rem; background: var(--wc-fog); }
.wc-coordinate__note h2 { margin: .6rem 0; font-family: var(--wc-serif); font-size: 1.5rem; line-height: 1.16; font-weight: 500; }
.wc-coordinate__note p:not(.wc-kicker) { margin: 0 0 1rem; font-size: .88rem; line-height: 1.65; }

.wc-logbook { min-width: 0; max-width: var(--wc-measure); }
.wc-logbook > h1 { max-width: 18ch; margin: 0 0 1.35rem; font-family: var(--wc-serif); font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: .98; font-weight: 500; letter-spacing: -.065em; text-wrap: balance; }
.wc-logbook > h1 + p { max-width: 57ch; margin-top: 0; color: color-mix(in srgb, var(--wc-ink) 74%, transparent); font-size: 1.08rem; line-height: 1.9; }
.wc-logbook h2 { position: relative; margin: 3.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--wc-rule); font-family: var(--wc-serif); font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.15; font-weight: 500; letter-spacing: -.045em; scroll-margin-top: 1.5rem; }
.wc-logbook h2::before { content: ""; position: absolute; top: -.18rem; left: 0; width: 2.3rem; height: .32rem; background: var(--wc-coral); }
.wc-logbook h3 { margin: 2.1rem 0 .65rem; font-family: var(--wc-serif); font-size: 1.27rem; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; scroll-margin-top: 1.5rem; }
.wc-logbook p { margin: 0 0 1.15rem; }
.wc-logbook ul, .wc-logbook ol { margin: 0 0 1.4rem; padding-left: 1.25rem; }
.wc-logbook li { padding-left: .18rem; margin: .35rem 0; }
.wc-logbook li::marker { color: var(--wc-coral); font-weight: 800; }
.wc-logbook strong { font-weight: 760; }
.wc-logbook a:not(.wc-waymark) { color: var(--wc-tide); text-decoration-color: color-mix(in srgb, var(--wc-tide) 40%, transparent); }
.wc-logbook hr { margin: 3rem 0 1.4rem; border: 0; border-top: 1px solid var(--wc-rule); }
.wc-logbook blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: .3rem solid var(--wc-sea); background: color-mix(in srgb, var(--wc-sea) 9%, var(--wc-paper)); }
.wc-logbook--home h1 { margin-top: .15rem; }

.wc-nightloop { margin-top: clamp(4rem, 9vw, 8rem); padding: 1.25rem 0 0; border-top: 1px solid var(--wc-rule); }
.wc-nightloop__head { display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; align-items: end; margin-bottom: 1.25rem; }
.wc-nightloop__head h2 { margin: 0; max-width: 24ch; }
.wc-nightloop__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; outline: none; }
.wc-nightloop__track figure { position: relative; min-height: 18rem; margin: 0; overflow: hidden; background: var(--wc-ink); }
.wc-nightloop__track figure:nth-child(2) { transform: translateY(2.2rem); }
.wc-nightloop__track img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; opacity: .86; filter: saturate(.75); transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .5s ease, opacity .5s ease; }
.wc-nightloop__track figure:hover img, .wc-nightloop__track:focus-within img { transform: scale(1.06); filter: saturate(1); opacity: 1; }
.wc-nightloop__track figcaption { position: absolute; right: 1rem; bottom: .85rem; left: 1rem; color: var(--wc-moon); font-size: .76rem; line-height: 1.4; text-shadow: 0 1px 9px rgb(7 20 37 / .9); }

.wc-reading-grid { display: grid; grid-template-columns: minmax(13.5rem, 17rem) minmax(0, var(--wc-measure)); gap: clamp(2rem, 8vw, 8rem); justify-content: center; padding: clamp(2rem, 5vw, 5rem) 0 5rem; }
.wc-logbook__trail { min-width: 0; }
.wc-logbook__trail-sticky { position: sticky; top: 1.25rem; padding-top: .25rem; }
.wc-logbook__trail-title { margin: .55rem 0 1rem; font-family: var(--wc-serif); font-size: 1.45rem; line-height: 1.15; }
.wc-logbook__trail ol { margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--wc-rule); list-style: none; }
.wc-logbook__trail li { border-bottom: 1px solid var(--wc-rule); }
.wc-logbook__trail a { display: block; padding: .55rem 0; color: color-mix(in srgb, var(--wc-ink) 72%, transparent); font-size: .76rem; line-height: 1.35; text-decoration: none; transition: color .2s ease, padding-left .2s ease; }
.wc-logbook__trail a:hover { padding-left: .32rem; color: var(--wc-tide); }
.wc-logbook__trail-visual { position: relative; margin: 1.5rem 0 1.2rem; overflow: hidden; }
.wc-logbook__trail-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(7 20 37 / .56), transparent 45%); }
.wc-logbook__trail-visual img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.76); }
.wc-logbook__trail-visual figcaption { position: absolute; z-index: 1; right: .8rem; bottom: .6rem; left: .8rem; color: var(--wc-moon); font-size: .69rem; line-height: 1.35; }
.wc-logbook__trail .wc-waymark { font-size: .68rem; padding: .65rem .7rem; }
.wc-reading-grid > .wc-logbook > h1 { margin-top: .1rem; }
.wc-reading-grid .wc-nightloop { max-width: none; }
.wc-nightloop--article { margin-top: 4rem; }

.wc-signal { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; margin-top: 3.8rem; padding: 1.4rem; color: var(--wc-moon); background: var(--wc-night); }
.wc-signal__mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--wc-ink); background: var(--wc-coral); font-family: var(--wc-serif); font-size: 1.7rem; line-height: 1; }
.wc-signal .wc-kicker { color: var(--wc-sea); }
.wc-signal h2 { margin: .4rem 0 .5rem; padding: 0; border: 0; color: var(--wc-moon); font-size: 1.45rem; }
.wc-signal h2::before { display: none; }
.wc-signal p:not(.wc-kicker) { margin: 0; color: rgb(243 238 223 / .75); font-size: .87rem; line-height: 1.6; }

.wc-driftline { padding: 2rem 0; color: rgb(243 238 223 / .72); background: var(--wc-ink); }
.wc-driftline > div { width: min(1240px, calc(100% - 2.5rem)); margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .9rem 2rem; }
.wc-driftline small { max-width: 38rem; font-size: .68rem; line-height: 1.6; }
.wc-driftline nav { display: flex; flex-wrap: wrap; gap: .9rem; }
.wc-driftline a { color: var(--wc-moon); font-size: .7rem; }

@media (max-width: 820px) {
  .wc-beacon__mast { min-height: auto; padding-bottom: 1.5rem; grid-template-columns: 1fr; grid-template-areas: "eyebrow" "brand" "signal"; }
  .wc-beacon__signal { justify-content: space-between; }
  .wc-coordinate-field__header, .wc-coordinate-field__grid, .wc-reading-grid { grid-template-columns: 1fr; }
  .wc-coordinate { position: static; display: grid; grid-template-columns: 1.05fr .95fr; align-items: start; }
  .wc-coordinate__view img { aspect-ratio: 4 / 3; }
  .wc-coordinate__note { margin: 1.4rem 0 0 -1px; }
  .wc-reading-grid { gap: 2.5rem; }
  .wc-logbook__trail-sticky { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, .8fr); gap: 1rem 2rem; align-items: start; }
  .wc-logbook__trail-sticky > .wc-kicker, .wc-logbook__trail-title { grid-column: 1; }
  .wc-logbook__trail nav { grid-column: 1; grid-row: 2 / span 2; }
  .wc-logbook__trail-visual { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .wc-logbook__trail .wc-waymark { grid-column: 2; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  main, .wc-beacon__mast, .wc-tidepath, .wc-driftline > div { width: min(100% - 1.5rem, 1240px); }
  .wc-beacon__signal { align-items: flex-start; flex-direction: column; }
  .wc-tidepath a { margin-right: .7rem; }
  .wc-coordinate-field__header { gap: 1rem; }
  .wc-coordinate { display: block; }
  .wc-coordinate__note { margin: 0; }
  .wc-coordinate__view img { aspect-ratio: 16 / 10; }
  .wc-nightloop__track { grid-template-columns: 1fr; }
  .wc-nightloop__track figure:nth-child(2) { transform: translateX(1.1rem); }
  .wc-nightloop__track figure, .wc-nightloop__track img { min-height: 14rem; }
  .wc-logbook > h1 { font-size: clamp(2.45rem, 13vw, 3.5rem); }
  .wc-logbook h2 { margin-top: 3rem; }
  .wc-logbook__trail-sticky { display: block; }
  .wc-logbook__trail-visual { display: none; }
  .wc-logbook__trail .wc-waymark { margin-top: .25rem; }
  .wc-signal { grid-template-columns: 1fr; }
  .wc-driftline > div { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .wc-beacon__signal, .wc-tidepath, .wc-logbook__trail, .wc-nightloop, .wc-driftline, .wc-skip { display: none; }
  body, .wc-atlas { color: #000; background: #fff; }
  main { width: auto; }
  .wc-reading-grid { display: block; padding: 1rem 0; }
}