/* Ship search first; compact panels keep tools and editorial content distinct. */
.harbour-home { --harbour-accent: var(--ui-accent); --harbour-rule: var(--border-primary); }
.harbour-home h1, .harbour-home h2, .harbour-home h3 { letter-spacing: -.03em; line-height: 1.2; }
.harbour-home p { line-height: 1.7; }
.harbour-home a { text-underline-offset: .22em; }
.harbour-home a:focus-visible, .harbour-home button:focus-visible, .harbour-home input:focus-visible { outline: 3px solid var(--harbour-accent); outline-offset: 5px; }
.harbour-kicker { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--text-secondary); }
.harbour-kicker span { padding: 0 .35em; opacity: .65; }
.harbour-hero { padding: 2.75rem 0 2rem; }
.harbour-hero__grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 3rem; align-items: center; }
.harbour-intro h1 { font-size: clamp(2.2rem, 3.6vw, 3.15rem); margin: .8rem 0 1rem; }
.harbour-intro h1 span { color: var(--harbour-accent); }
.harbour-lede { color: var(--text-secondary); max-width: 38rem; font-size: 1rem; }
.harbour-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin: 1.2rem 0 0; }
.harbour-button { background: #e5b96d; color: #102236; display: inline-flex; gap: 1.5rem; align-items: center; padding: .65rem 1rem; border-radius: 6px; text-decoration: none; font-weight: 700; }
.harbour-button:hover { color: #102236; background: #f2ce8d; }
.harbour-text-link { color: var(--text-primary); font-size: .9rem; font-weight: 600; }
.harbour-text-link:hover { color: var(--harbour-accent); }
.harbour-search { padding: 1rem; margin-top: 1.4rem; border: 1px solid var(--harbour-rule); border-radius: 8px; background: var(--bg-secondary); }
.harbour-search label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .6rem; }
.harbour-search__field { display: flex; border: 1px solid var(--border-secondary, #567); border-radius: 6px; background: var(--bg-primary); }
.harbour-search input { min-width: 0; width: 100%; border: 0; background: transparent; color: var(--text-primary); padding: .9rem; font-size: 1rem; }
.harbour-search input::placeholder { color: var(--text-tertiary); opacity: 1; }
.harbour-search button { border: 0; border-left: 1px solid var(--harbour-rule); background: #e5b96d; color: #17212e; border-radius: 0 5px 5px 0; padding: .8rem 1.1rem; white-space: nowrap; font-size: .85rem; font-weight: 600; }
.harbour-search > a { display: inline-block; font-size: .8rem; color: var(--text-secondary); margin-top: .6rem; }
.harbour-visual { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--harbour-rule); border-radius: 8px; overflow: hidden; }
.harbour-visual > img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.harbour-visual__caption { display: flex; justify-content: space-between; padding: .6rem 1.2rem; border-bottom: 1px solid var(--harbour-rule); font-size: .65rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .07em; }
.harbour-feature { padding: 1.25rem; }
.harbour-feature .harbour-kicker { color: var(--ui-link); }
.harbour-feature h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.harbour-feature h2 a { color: var(--text-primary); text-decoration: none; }
.harbour-feature h2 a:hover { text-decoration: underline; }
.harbour-feature > p:last-child { color: var(--text-secondary); font-size: .8rem; margin: 0; }
.harbour-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--harbour-rule); border-radius: 8px; background: var(--bg-secondary); }
.harbour-shortcuts > a { display: flex; align-items: center; gap: .85rem; padding: 1.2rem 1rem; color: var(--text-primary); text-decoration: none; }
.harbour-shortcuts > a + a { border-left: 1px solid var(--harbour-rule); }
.harbour-shortcuts > a:hover { background: var(--bg-secondary); }
.harbour-shortcuts > a > span:last-child { margin-left: auto; }
.harbour-number { font-family: var(--font-body); font-size: .78rem; font-weight: 700; color: var(--harbour-accent); background: var(--ui-soft); padding: .4rem; border-radius: 4px; }
.harbour-shortcuts strong { display: block; font-size: .9rem; }
.harbour-shortcuts small { color: var(--text-secondary); font-size: .72rem; }
.harbour-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.harbour-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 1.8rem; }
.harbour-section-heading h2, .harbour-channel h2, .harbour-about h2 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); margin: 0; }
.harbour-section-heading .harbour-kicker { margin-bottom: .65rem; }
.harbour-dispatch-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 1.5rem; }
.harbour-dispatch { padding: 1.2rem 1.4rem; border: 1px solid var(--harbour-rule); background: var(--bg-secondary); border-radius: 8px; }
.harbour-dispatch + .harbour-dispatch { margin-top: .75rem; }
.harbour-dispatch > div { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.harbour-dispatch time { color: var(--text-secondary); font-size: .75rem; white-space: nowrap; }
.harbour-dispatch h3 { font-size: 1.2rem; margin: .65rem 0 .2rem; }
.harbour-dispatch h3 a { text-decoration: none; color: var(--text-primary); }
.harbour-dispatch h3 a:hover { text-decoration: underline; }
.harbour-dispatch p { margin: .75rem 0 0; color: var(--text-secondary); font-size: .9rem; }
.harbour-fieldnote { background: var(--bg-secondary); padding: 1.7rem; border: 1px solid var(--harbour-rule); border-top: 3px solid var(--harbour-accent); border-radius: 8px; align-self: start; }
.harbour-fieldnote h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.harbour-fieldnote > p:not(.harbour-kicker) { color: var(--text-secondary); font-size: .9rem; }
.harbour-reading { background: var(--bg-secondary); border-block: 1px solid var(--harbour-rule); }
.harbour-section-intro { max-width: 51rem; color: var(--text-secondary); margin: -.4rem 0 2rem; }
.harbour-guides { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.harbour-guide { border: 1px solid var(--harbour-rule); padding: 1.4rem; border-radius: 8px; background: var(--bg-secondary); display: flex; flex-direction: column; align-items: start; }
.harbour-guide h3 { font-size: 1.2rem; margin-bottom: .8rem; }
.harbour-guide h3 a { color: var(--text-primary); text-decoration: none; }
.harbour-guide h3 a:hover { text-decoration: underline; }
.harbour-guide > p:not(.harbour-kicker) { color: var(--text-secondary); font-size: .92rem; }
.harbour-guide > a { margin-top: auto; }
.harbour-channel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: center; }
.harbour-channel p:not(.harbour-kicker) { color: var(--text-secondary); margin: 1rem 0; }
.harbour-watch-link { display: block; margin-top: .8rem; }
.harbour-video { aspect-ratio: 16/9; background: #11283b; border: 1px solid #344c5c; }
.harbour-video button { width: 100%; height: 100%; padding: 1.5rem; background: transparent; color: #f3f4f5; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.harbour-video button:hover { background: #1b374c; }
.harbour-video button strong { max-width: 26rem; font-size: 1.1rem; }
.harbour-video button > span:last-child { color: #b9c9d3; font-size: .8rem; }
.harbour-play { color: #e4ba68; border: 1px solid #e4ba68; border-radius: 50%; width: 3.3rem; height: 3.3rem; display: grid; place-content: center; padding-left: 3px; }
.harbour-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.harbour-video--empty { display: grid; place-content: center; padding: 2rem; }
.harbour-about { border-top: 1px solid var(--harbour-rule); padding-block: 2.5rem 3.5rem; display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; }
.harbour-about p:not(.harbour-kicker) { color: var(--text-secondary); }
:root[data-theme="light"] .harbour-home { --harbour-accent: #805b16; }
:root[data-theme="light"] .harbour-button { background: #e4ba68; }
@media (max-width: 991px) {
    .harbour-hero__grid { gap: 1.7rem; }
    .harbour-shortcuts { grid-template-columns: repeat(2, 1fr); }
    .harbour-shortcuts > a:nth-child(3) { border-left: 0; }
    .harbour-shortcuts > a:nth-child(n+3) { border-top: 1px solid var(--harbour-rule); }
    .harbour-guides { grid-template-columns: repeat(2, 1fr); }
    .harbour-channel { gap: 2rem; }
}
@media (max-width: 767px) {
    .harbour-hero { padding-top: 2rem; }
    .harbour-hero__grid, .harbour-dispatch-grid, .harbour-channel, .harbour-about { grid-template-columns: 1fr; gap: 2rem; }
    .harbour-intro h1 { font-size: clamp(2rem, 7.6vw, 2.8rem); }
    .harbour-hero__grid { gap: 2rem; }
    .harbour-feature { padding: 1.3rem; }
    .harbour-section { padding-block: 2.5rem; }
    .harbour-section-heading { align-items: start; flex-direction: column; gap: .9rem; }
    .harbour-shortcuts > a { padding: 1rem .5rem; gap: .5rem; }
    .harbour-shortcuts small { font-size: .68rem; }
    .harbour-guides { grid-template-columns: 1fr; gap: 1.8rem; }
    .harbour-about { padding-bottom: 2rem; }
}

.harbour-examples { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; font-size: .75rem; }
.harbour-examples > span { color: var(--text-tertiary); margin-right: .3rem; }
.harbour-examples a { color: var(--text-secondary); border: 1px solid var(--harbour-rule); border-radius: 4px; padding: .35rem .55rem; text-decoration: none; }
.harbour-examples a:hover { color: var(--ui-link); border-color: var(--ui-link); }
.harbour-intro > .harbour-actions .harbour-text-link { font-size: .8rem; }
@media (max-width: 767px) { .harbour-search { padding: .85rem; } .harbour-search input { font-size: .9rem; } .harbour-search button { padding-inline: .65rem; } .harbour-shortcuts { width: calc(100% - 24px); } .harbour-number { display: none; } .harbour-dispatch { padding: 1rem; } }