html { height: 100%;}
body { top: 0px; bottom: 0px; max-height: 100%; height: 100%; margin: 0px; }
#header { display: block; height: 75px;font-size: 12pt; color: white;  background-color: #AABBBB; }
#footer { position: absolute; bottom: 0; left: 0; right: 0; display: inline; overflow: hidden; height: 160px; background-color: #40392e; }
div.mode { display: flex; justify-content: flex-start; align-items: flex-start;    background-color: #60594e; }
div.tab { display: table-cell; vertical-align: middle; margin: 0px; border-top: none; border-bottom: none; border-left: none; border-right: solid; border-width: 1px; border-color: black; text-align: center; float: left; height: 23px; width: 97px; font-size: 12pt; background-color: #777777; }
div.error { font-size: 12pt; float: left; margin-left: 10px; margin-top: 6px; color: red; }
div.selectedtab { border-top: none; border-bottom: none; border-left: none; border-right: solid; border-width: 1px; border-color: black; margin: 0px; text-align: center; float: left; height: 23px; width: 97px; font-color: black;    background-color: #dddddd; }
#main { height: 100%; display: block; color: #333333; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; overflow: auto;    background-color: #dddddd; }
a.tablink { text-decoration: none; color: black; font-size: 12pt}
a { color: #4444bb; font-size: 12pt}
th { background-color: #CCCCCC; padding: 4px 10px 4px 10px; margin: 0px; border: none; border-width: 0px; }
td { border-bottom: solid; border-width: 2px; border-color: #CCCCCC; padding: 4px 10px 4px 10px; margin: 0px; }
h1 { color: #c0b098; font-size: 18pt}
h1.title { margin-left: 20px; }
h2 { color: #333333; font-size: 18pt; font-weight: bold; }
h3 { color: #333333; font-size: 14pt; }
input.button { margin-top: 7px; margin-left: 5px; }
div.links { position: relative; top: -48px; height: 23px; opacity: 1.0; padding-right: 10px; text-align: right; white-space: nowrap; }
div.linkbar { position: relative; top: -26px; height: 23px; opacity: 0.7; padding-right: 10px; text-align: right; white-space: nowrap;    background-color: #c0b098; }
img.titleimage { margin: 0px; padding: 0px;    height: 75px; }
div.row { display: table-row; }
div.label { display: table-cell; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; text-align: right; width: 150px; float: left; }
div.input { display: table-cell; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; text-align: left; float: left; }
select { width: 150px; }

 jaclradio { float: left; }
div.bottompad { min-height: 100px; }
div.powerhead_map { background-image: url('images/outboard/powerhead_map.jpg?v=6c13eff744'); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 200vw; height: 100vw; }
div.powerhead_map_mobile { background-image: url('images/outboard/powerhead_map.jpg?v=6c13eff744'); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 200vw; height: 100vw; }
span.breadcrumbs { text-decoration: none; font-size: 12pt; }
a.breadcrumbs { text-decoration: none; font-size: 12pt; }
div.breadcrumbs { width: 95%; padding: 10px; border-width: 4px; border-left-style: solid; border-right-style: solid; background-color: #e8e8e8; text-decoration: none; font-size: 10pt; }
div.look { clear: both; display: block; margin-left: 10px; margin-top: 15px; margin-bottom: 10px; overflow: auto; }
div.paragraph { width: 90%; margin-bottom: 50px; margin-left: 5%; overflow: auto; }
img.logo { max-width: 50%; float: left; margin-right: 10px; }
img.profile { float: right; max-width: 50%; margin-left: 20px; border-radius: var(--radius-lg); }
img.rightarrow { margin-top: 5px; cursor: pointer; float: right; }
img.donate { margin-top: 3px; margin-right: 4px; clear: right; }
a.restart { float: right; clear: right; }
a.powerhead { background: transparent url('images/outboard/Powerhead.png?v=03bf2bc0c7') center top no-repeat; position: absolute; left: 0px; top: 7px; width: 253px; height: 151px; }
a.powerhead:hover, a.powerhead:active { background-image: url('images/outboard/Powerhead_Hover.png?v=fc58e809d0'); }
#swivel-bracket_img { background: transparent url('images/outboard/SwivelBracket.png?v=8ae3c99f58') center top no-repeat; position: absolute; left: 5px; top: 158px; width: 88px; height: 191px; }
#swivel-bracket_img:hover { background-image: url('images/outboard/SwivelBracket_Hover.png?v=88382f4f7e'); }
#mid-section_img { background: transparent url('images/outboard/Midsection.png?v=ec0b7d39e3') center top no-repeat; position: absolute; left: 93px; top: 158px; width: 160px; height: 190px; }
#mid-section_img:hover { background-image: url('images/outboard/Midsection_Hover.png?v=c9ac2da336'); }
#lower-unit_img { background: transparent url('images/outboard/Lowerunit.png?v=7305ba5d28') center top no-repeat; position: absolute; left: 55px; top: 346px; width: 185px; height: 143px; }
#lower-unit_img:hover { background-image: url('images/outboard/Lowerunit_Hover.png?v=a48c77f91e'); }
#propeller_img { background: transparent url('images/outboard/Propeller.png?v=edc915b0f5') center top no-repeat; position: absolute; left: 155px; top: 380px; width: 100px; height: 120px; }
#propeller_img:hover { background-image: url('images/outboard/Propeller_Hover.png?v=a078810701'); }
img.topic { border-radius: var(--radius-lg); border: 5px solid #60594e; width: 100%; height: 100%; }
div.photo { max-width: 560px; max-height: 315px; display: inline-block; position: relative; margin-right: 20px; }
div.photo_mobile { max-width: 360px; max-height: 210px; display: inline-block; position: relative; margin-bottom: 20px; }
div.video { display: inline-block; position: relative; margin-right: 20px; }
div.video_mobile { display: inline-block; position: relative; margin-bottom: 20px; }
div.options { margin-top: 0px; display: inline-block; max-width: 580px; min-width: 300px; }
div.outboard { margin-bottom: 20px; display: inline-block; position: relative; min-width: 262px; max-width: 262px; width: 262px; margin-right: 20px; height: 500px; background-color: #555555; border-radius: var(--radius-lg); border: 5px solid #c0b098; }
div.desktop_flexbox { display: flex; flex-direction: row; align-items: flex-start; }
div.mobile_flexbox { display: flex; flex-direction: column; align-items: center; }
div.main { width: 100%; margin: auto; padding: 10px; }
div.description { position: relative; float: left; width: 400px; height: 484px; background-color: lightblue; padding: 10px; margin: 10px; border: 3px solid #666666; }
#render_topic_map { width: 100%; overflow: auto; padding: 12px 0; border-radius: var(--radius-lg); background-color: var(--card); background-image: radial-gradient(#e4ddd1 1px, transparent 1px); background-size: 20px 20px; border: 1px solid var(--line); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
img.rightarrow { margin-top: unset; cursor: unset; float: unset;}
div.accordion_option_desc { overflow: hidden; /* prevent text wrapping under next btn icon */  }
a.accordion_option_next { float: right; margin-left: 10px; }
a.accordion_option_next:hover img { background: #EEE; border-radius: var(--radius-sm); }
#powerhead_img { background: transparent url('images/outboard/Powerhead.png?v=03bf2bc0c7') center top no-repeat; position: absolute; left: 0px; top: 7px; width: 253px; height: 151px; }
#powerhead_img:hover, #powerhead_img.active { background-image: url('images/outboard/Powerhead_Hover.png?v=fc58e809d0'); }
#swivel-bracket_img { background: transparent url('images/outboard/SwivelBracket.png?v=8ae3c99f58') center top no-repeat; position: absolute; left: 5px; top: 158px; width: 88px; height: 191px; }
#swivel-bracket_img:hover, #swivel-bracket_img.active { background-image: url('images/outboard/SwivelBracket_Hover.png?v=88382f4f7e'); }
#mid-section_img { background: transparent url('images/outboard/Midsection.png?v=ec0b7d39e3') center top no-repeat; position: absolute; left: 93px; top: 158px; width: 160px; height: 190px; }
#mid-section_img:hover, #mid-section_img.active { background-image: url('images/outboard/Midsection_Hover.png?v=c9ac2da336'); }
#lower-unit_img { background: transparent url('images/outboard/Lowerunit.png?v=7305ba5d28') center top no-repeat; position: absolute; left: 55px; top: 346px; width: 185px; height: 143px; }
#lower-unit_img:hover, #lower-unit_img.active { background-image: url('images/outboard/Lowerunit_Hover.png?v=a48c77f91e'); }
#propeller_img { background: transparent url('images/outboard/Propeller.png?v=edc915b0f5') center top no-repeat; position: absolute; left: 155px; top: 380px; width: 100px; height: 120px; }
#propeller_img:hover, #propeller_img.active { background-image: url('images/outboard/Propeller_Hover.png?v=a078810701'); }
div.outboard a:hover { cursor: pointer; }
div.video_preload { cursor: pointer; background: #000; width: 100%; height: 100%; background-color: #000; background-size: contain; background-position: center center; background-repeat: no-repeat; }
div.video_preload:after { cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0.9; width: 68px; height: 54px; background: url('images/outboard/play_icon_red.png'); background-size: cover; content: ''; }
div.video_preload:hover:after { background: url('images/outboard/play_icon_white.png'); }
div.photo { width: 100%; height: 210px; border: 5px solid #60594e; border-radius: var(--radius); overflow: hidden; background: #60594e; background-repeat: no-repeat; background-position: center top; background-size: contain; margin-bottom: 20px; margin-right: 0px; }
@media screen and (min-width: 1000px) { div.photo { width: 560px; height: 315px; margin-right: 20px; }
}
div.photo div.photo_caption { position: absolute; bottom: 0%; width: 100%; height: auto; background: rgba(0,0,0,.7); color: #FFF; font-size: 0.8em; }
div.photo div.photo_caption_inner span { font-weight: bold; }
div.photo_caption_inner { padding: 12px; }
div.photo img { border-radius: var(--radius);}
div.ui-accordion .ui-accordion-content { padding: 0.7em 1em; }
p { line-height: 1.3em; }
div.breadcrumbs { width: 100%; box-sizing: border-box; border-color: #555; line-height: 24px; }
div.breadcrumbs a.breadcrumbs { color: #222; }
div.breadcrumbs a.breadcrumbs:hover { color: #0000FF; }
div.breadcrumbs span.breadcrumbs { font-weight: bold; color: #555; }
div.links { color: #333; }
div.links a { color: #FFF; text-decoration: none; font-weight: bold; }
div.links a:hover { color: #000; }
div.mode { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; margin: 0px auto; }
div.mode, div.mode div.tab, div.mode div.selectedtab { height: 34px; line-height: 34px; }
div.mode div.tab:hover { background: #555; cursor: pointer; }
div.mode div.tab:hover a.tablink { color: #FFF; }
#header img.titleimage { max-width: 100% !important; }
a.rightimage { height: 50px; float: right; }
img.rightimage { height: 50px; float: right; }
div.paragraph { overflow: unset; width: unset; margin-left: unset; margin-bottom: unset; }
#main { overflow: unset; height: unset; background-color: unset; padding-top: unset; padding-bottom: unset; padding-left: unset; padding-right: unset; width: 90%; margin: 0px auto; margin-top: 15px; }
html,body { background: #dddddd; }

/* Added by tools/build_html.py: desktop/mobile switching, see DEVICE_CSS. */
.jacl_mobile { display: none; }
@media screen and (min-width: 768px) {
   body { min-width: 960px; }
}
@media screen and (max-width: 767px) {
   .jacl_desktop { display: none; }
   .jacl_mobile { display: block; }
   div.desktop_flexbox { flex-direction: column; align-items: center; }
   div.video { margin-right: 0px; margin-bottom: 20px; }
   div.video iframe { width: 360px; height: 210px; }
}
div.picture { margin-bottom: 20px; padding: 10px; border-radius: var(--radius-lg); border: 5px solid #c0b098; }
div.picture svg { display: block; width: 100%; height: auto; }
div.picture .hover { opacity: 0; transition: opacity 0.15s; }
div.picture a.area:hover .hover { opacity: 1; }
div.picture .hit { fill: transparent; cursor: pointer; }
div.picture .hit.outline { stroke: transparent; stroke-width: 4; transition: fill 0.15s, stroke 0.15s; }
div.picture a.area:hover .hit.outline { fill: rgba(4, 167, 255, 0.15); stroke: #04A7FF; }
div.picture_boat { max-width: 900px; background-color: #ffffff; }
div.picture_navigation-electronics { box-sizing: border-box; width: 560px; max-width: 100%; flex-shrink: 1; margin-right: 20px; background-color: #f5f5f5; }
img.rightimage.raymarine { height: 20px; margin: 15px 25px 0 0; }

/* A more modern look over the JACL styles above: the device's own system
   font instead of Verdana, rounded tabs that join the page, and flat cards
   for the breadcrumbs, options and tables in place of jQuery UI's textures. */
:root { --ink: #26231f; --muted: #6b655c; --page: #f3f1ec; --card: #ffffff; --line: #dcd5c8;
        --bar: #4a4238; --link: #0b66a8; --accent: #04A7FF;
        --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        /* Three corner sizes: controls (inputs, buttons), cards and panels
           (breadcrumbs, tables, videos, the map's cards), and the large
           feature cards and photos. Pills are 999px and avatars 50%. */
        --radius-sm: 10px; --radius: 12px; --radius-lg: 18px; }
html, body { background: var(--page); }
/* One font everywhere; form controls and jQuery UI's widgets don't inherit it
   by themselves. */
body, input, button, select, textarea, .ui-widget, .ui-widget input, .ui-widget select,
.ui-widget textarea, .ui-widget button { font-family: var(--font); }
#main { color: var(--ink); font-size: 16px; line-height: 1.55; }
p { line-height: 1.55; }
a { color: var(--link); font-size: inherit; text-underline-offset: 2px; }
a:hover { color: #084f82; }
h2 { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); margin: 0.3em 0 0.5em; }
h3 { font-size: 1.15rem; font-weight: 600; color: var(--ink); }

div.mode { display: flex; gap: 4px; box-sizing: border-box; height: auto; line-height: normal; padding: 8px 16px 0; background: var(--bar); }
div.mode div.tab, div.mode div.selectedtab { float: none; width: auto; height: auto; line-height: normal;
   border: none; padding: 9px 20px 10px; border-radius: var(--radius) var(--radius) 0 0; font-size: 15px; font-weight: 500;
   background: transparent; transition: background 0.15s; }
div.mode div.tab a.tablink { color: #ece6db; font-size: 15px; }
div.mode div.tab:hover { background: rgba(255, 255, 255, 0.1); }
div.mode div.tab:hover a.tablink { color: #fff; }
div.mode div.selectedtab { background: var(--page); color: var(--ink); font-weight: 600; }
div.links { font-size: 14px; }

div.breadcrumbs { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
   padding: 10px 16px; font-size: 14px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
div.breadcrumbs a.breadcrumbs, div.breadcrumbs span.breadcrumbs { font-size: 14px; }
div.breadcrumbs a.breadcrumbs { color: var(--muted); }
div.breadcrumbs a.breadcrumbs:hover { color: var(--link); }
div.breadcrumbs span.breadcrumbs { color: var(--ink); font-weight: 600; }

#accordion.ui-accordion .ui-accordion-header { background: var(--card); border: 1px solid var(--line);
   border-radius: var(--radius); margin-top: 8px; padding: 0.8em 1em; font-size: 15px; font-weight: 600;
   color: var(--ink); transition: background 0.15s; }
#accordion.ui-accordion .ui-accordion-header:hover { background: #faf8f4; }
#accordion.ui-accordion .ui-accordion-header-active { border-radius: var(--radius) var(--radius) 0 0; background: #f7f4ee; }
#accordion.ui-accordion .ui-accordion-content { background: var(--card); border: 1px solid var(--line);
   border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 0.8em 1em 1em; color: var(--ink);
   font-size: 15px; line-height: 1.5; }
/* jQuery UI's theme sets its own font on the accordion; use the site's. */
#accordion.ui-widget, #accordion .ui-widget-content { font-family: var(--font); }
#accordion a.accordion_option_next { float: right; margin: 2px 0 6px 14px; padding: 7px 14px; border-radius: 999px;
   background: var(--bar); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
#accordion a.accordion_option_next:hover { background: #2f2923; color: #fff; }

table { border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden;
   box-shadow: 0 0 0 1px var(--line); }
th { background: #ebe6dc; text-align: left; font-weight: 600; padding: 9px 14px; }
td { border-bottom: 1px solid var(--line); padding: 9px 14px; vertical-align: top; }
tr:last-child td { border-bottom: none; }
#main form div.label { width: auto; padding-top: 8px; }
#main input[type="search"], #main input[type="text"] { font: inherit; padding: 8px 12px; min-width: 280px;
   border: 1px solid #c9c1b3; border-radius: var(--radius-sm); background: var(--card); }
#main input[type="search"]:focus, #main input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#main input[type="submit"] { font: inherit; padding: 8px 16px; border: none; border-radius: var(--radius-sm);
   background: var(--bar); color: #fff; cursor: pointer; }
div.video iframe { border-radius: var(--radius); }
/* Offline (see worksOffline in outboard.js) the videos can't play. */
body.offline div.video iframe { visibility: hidden; }
body.offline div.video { background: #e6e1d7; border-radius: var(--radius); }
body.offline div.video::after { content: "This video needs an internet connection"; position: absolute; inset: 0;
   display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center;
   color: var(--muted); font-size: 15px; }
/* A run of videos, as many across as fit (see video_rows in build_html.py).
   Each clip is its heading or caption, its video and any text under it;
   subgrid gives those the same rows across the grid, so the videos beside
   each other line up. */
div.videos { display: grid; grid-template-columns: repeat(auto-fill, 560px); column-gap: 24px; margin: 1em 0 1.5em; }
div.videos div.clip { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 12px; }
div.videos div.caption { align-self: end; }
div.videos div.caption h2 { font-size: 1.3rem; margin-top: 0.8em; }
div.videos div.video { margin: 0; }
div.videos div.after p:first-child { margin-top: 0.6em; }
/* The Videos tab: every video, or the search results with the moments
   where the words are said. */
#video_count { color: var(--muted); margin: 0.6em 0; }
#video_list { padding-left: 0; list-style: none; }
#video_list li, div.video_result { padding: 8px 0; border-bottom: 1px solid var(--line); }
#video_list li a, div.video_result > a { font-weight: 600; }
span.video_meta { display: block; font-size: 0.85em; color: var(--muted); }
div.video_result ul { list-style: none; padding-left: 0; margin: 6px 0 0; }
div.video_result ul li { margin: 4px 0; font-size: 0.95em; }
a.moment { white-space: nowrap; font-variant-numeric: tabular-nums; margin-right: 4px; }
div.video_result mark { background: #fbe7a1; color: inherit; padding: 0 1px; }
#answer { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4em 1.1em 0.8em;
   margin: 0.8em auto 1em; max-width: 780px; box-sizing: border-box; }
#answer h3 { margin: 0.5em 0 0.3em; }
#answer p, #answer li { margin: 0.4em 0; }
#answer sup a.cite { text-decoration: none; font-weight: 600; padding: 0 1px; }
p.answer_status { color: var(--muted); font-style: italic; }
p.answer_community a { font-weight: 600; }
#search_examples, #ask_examples { margin: 0.3em 0 0.8em; font-size: 0.9em; color: var(--muted); }
/* What Eddie's answer drew on: a compact line per video, with a chip for each
   moment cited, so it reads as sources, not as the Search tab's results. */
#answer h4 { margin: 1em 0 0.3em; padding-top: 0.6em; border-top: 1px solid var(--line); font-size: 0.85em;
   text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
ul.answer_sources { list-style: none; margin: 0; padding: 0; font-size: 0.9em; }
ul.answer_sources li { display: flex; gap: 10px; align-items: center; margin: 0.45em 0; }
ul.answer_sources a.thumb { flex: none; line-height: 0; }
ul.answer_sources img { width: 64px; height: 36px; object-fit: cover; border-radius: var(--radius-sm); }
ul.answer_sources .title { display: block; font-weight: 600; line-height: 1.3; }
ul.answer_sources .moments { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
ul.answer_sources a.moment { font-size: 0.85em; padding: 1px 8px; border-radius: 999px; background: var(--page);
   border: 1px solid var(--line); text-decoration: none; white-space: nowrap; }
ul.answer_sources a.moment:hover { border-color: var(--accent); }
.eddie + #answer { margin-top: 1.2em; }
p.note { font-size: 0.9em; color: var(--muted); }
@media screen and (max-width: 767px) {
   /* Six tabs across a 360px phone: they share the width out between them. */
   div.mode { gap: 0; padding: 6px 4px 0; }
   div.mode div.tab, div.mode div.selectedtab { flex: 1 1 auto; padding: 8px 4px 9px; text-align: center; }
   div.mode div.tab a.tablink, div.mode div.selectedtab { font-size: 13px; }
   div.video { width: 100%; max-width: 360px; }
   div.video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
   div.videos { grid-template-columns: 100%; }
   #main input[type="search"] { min-width: 0; width: 100%; box-sizing: border-box; }
   #main form div.input { float: none; }
   #reference_list th:nth-child(2), #reference_list td:nth-child(2) { display: none; }
   #reference_list th, #reference_list td { padding: 8px 10px; }
}

/* The header: the banner picture of a workboat and divers on the left
   (tools/make_banner.py), with the title and tagline drawn on it, fading into
   the plain colour that fills the rest of the width, and the sponsors and
   support links on the right. */
#header { --banner: 130px; position: relative; height: auto; background: #016a82; color: var(--ink); }
#header a.banner { display: block; position: relative; height: var(--banner);
   background: url('images/header/banner.jpg?v=ceb1e9ae9d') left center / auto 100% no-repeat; text-decoration: none; }
/* The tagline is drawn on the banner; this copy is for search engines and
   screen readers only. */
#header .tagline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
   clip-path: inset(50%); white-space: nowrap; }
#header .sponsors { position: absolute; top: 16px; right: 24px; display: flex; align-items: center; gap: 28px; }
#header img.sponsor { display: block; height: 44px; }
#header img.sponsor.raymarine { height: 20px; }
#header div.links { position: absolute; top: auto; bottom: 12px; right: 24px; height: auto; padding: 0;
   font-size: 14px; color: #5a5146; opacity: 1; }
#header div.links a { color: #3f3830; font-weight: 600; text-decoration: none; }
#header div.links a:hover { color: #000; }
#header .sponsors, #header div.links { background: rgba(221, 208, 188, 0.85); border-radius: var(--radius-sm); }
#header .sponsors { padding: 4px 8px; }
#header div.links { padding: 2px 8px; }
@media screen and (max-width: 1300px) {
   #header .sponsors { gap: 18px; }
   #header img.sponsor { height: 30px; }
   #header img.sponsor.raymarine { height: 15px; }
   #header div.links { font-size: 13px; }
}
@media screen and (max-width: 767px) {
   #header { --banner: 90px; }
   #header .sponsors { display: none; }
   #header div.links { position: static; border-radius: 0; background: #ddd0bc; padding: 6px 10px;
      text-align: center; white-space: normal; font-size: 13px; }
}

/* The footer on every page (content/pages/footer.html): the logo in grey
   beside the copyright and the channel and policy links. */
div.bottompad { min-height: 3rem; }
.site_footer { clear: both; display: flex; align-items: center; justify-content: center; gap: 16px;
   padding: 28px 16px 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
/* The logo is white (projects/images/brand), so it can go on dark backgrounds
   as it is; here it's turned a mid grey. */
.site_footer img { flex: none; height: 48px; width: auto; filter: grayscale(1) brightness(0.5); }
.site_footer p { margin: 2px 0; line-height: 1.5; }
.site_footer a { color: var(--muted); }
.site_footer a:hover { color: var(--ink); }

/* The Home tab (content/pages/home.html): a centred page that scrolls
   through bands (plain, white and dark, running the full width of the
   window), with Ask Eddie first. Things fade up as they scroll into view
   (outboard.js, revealOnScroll), unless the reader prefers less motion. */
.home { max-width: 1100px; margin: 0 auto; text-align: center; }
.home h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.015em;
   line-height: 1.2; margin: 0 0 1em; }
.home_hero { padding: clamp(1.5rem, 5vw, 3.5rem) 0 0.5rem; }
.home h1 { color: var(--ink); font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 700; letter-spacing: -0.03em;
   line-height: 1.08; margin: 0 auto 0.4em; max-width: 15em; }
.home .home_lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); margin: 0 auto 2rem; max-width: 36em; }
.eddie { display: flex; gap: 22px; align-items: center; max-width: 780px; margin: 0 auto; text-align: left;
   background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 24px;
   box-shadow: 0 12px 32px rgba(38, 35, 31, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); }
.eddie img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; }
.eddie_box { flex: 1; min-width: 0; }
.eddie label { display: block; font-weight: 700; font-size: 1.25rem; margin-bottom: 8px; }
.eddie_row { display: flex; gap: 8px; }
.eddie_row input[type="search"] { flex: 1; min-width: 0; font-size: 16px; padding: 11px 14px;
   border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color 0.2s, box-shadow 0.2s; }
.eddie_row input[type="search"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(4, 167, 255, 0.15); }
.eddie_row input[type="submit"] { font-size: 16px; font-weight: 600; padding: 11px 24px; border: none;
   border-radius: var(--radius-sm); background: var(--bar); color: #fff; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.eddie_row input[type="submit"]:hover { background: #2f2923; transform: translateY(-1px); }
.eddie_about { font-size: 0.9rem; color: var(--muted); margin: 0.7em 0 0; }
/* The channel's subscribe button, above Ask Eddie: YouTube red, with the
   subscriber count (content/views.json) beside the words. */
a.home_subscribe { display: inline-flex; align-items: center; gap: 10px; margin: -0.6rem auto 2rem; padding: 12px 22px;
   border-radius: 999px; background: #e00; color: #fff; font-size: 1.05rem; font-weight: 700; text-decoration: none;
   box-shadow: 0 8px 20px rgba(204, 0, 0, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s; }
a.home_subscribe span { font-weight: 500; opacity: 0.85; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.4); }
a.home_subscribe:hover { background: #c00; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(204, 0, 0, 0.32); }
@media screen and (max-width: 767px) {
   a.home_subscribe { font-size: 1rem; padding: 11px 18px; }
   a.home_subscribe span { display: none; }
}
.home_paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 2.5rem 0 3.5rem; text-align: left; }
a.home_path { display: block; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--bar); color: #ece6db;
   text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s; }
a.home_path b { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
a.home_path span { font-size: 0.9rem; line-height: 1.45; }
a.home_path:hover { background: #2f2923; color: #fff; transform: translateY(-4px);
   box-shadow: 0 14px 28px rgba(38, 35, 31, 0.22); }
/* A section runs the full width of the window: the shadow paints its
   colour out to the sides, and the clip keeps it from spreading up or down. */
.home_section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.home_band, .home_dark { clip-path: inset(0 -100vmax); }
.home_band { background: var(--card); box-shadow: 0 0 0 100vmax var(--card); }
.home_dark { background: var(--bar); box-shadow: 0 0 0 100vmax var(--bar); color: #ece6db; }
.home_dark h2 { color: #fff; }
.home_dark a { color: #9fd3ff; }
.home_section h2 a { color: inherit; }
.home_more { font-size: 0.95rem; margin: 2em 0 0; }
a.video_card { display: block; color: var(--ink); text-decoration: none; transition: transform 0.25s ease; }
a.video_card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius);
   background: var(--line); box-shadow: 0 4px 14px rgba(38, 35, 31, 0.1); transition: box-shadow 0.25s ease; }
a.video_card b { display: block; margin: 10px 0 2px; line-height: 1.3; }
a.video_card span { font-size: 0.85rem; color: var(--muted); }
a.video_card:hover { transform: translateY(-4px); }
a.video_card:hover img { box-shadow: 0 14px 30px rgba(38, 35, 31, 0.2); }
a.video_card:hover b { color: var(--link); }
a.video_card.large { max-width: 760px; margin: 0 auto; }
a.video_card.large img { border-radius: var(--radius-lg); }
a.video_card.large b { font-size: 1.3rem; margin-top: 14px; }
.video_cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.home_about { display: flex; gap: clamp(24px, 4vw, 48px); align-items: center; justify-content: center; text-align: left; }
.home_about img { width: 340px; max-width: 42%; border-radius: var(--radius-lg); flex: none; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }
.home_about div { max-width: 34em; }
.home_articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
a.home_article { display: block; padding: 18px 20px; background: var(--page); border: 1px solid var(--line);
   border-radius: var(--radius-lg); color: var(--ink); text-decoration: none;
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s; }
a.home_article b { display: block; margin-bottom: 6px; line-height: 1.3; }
a.home_article span { font-size: 0.9rem; color: var(--muted); }
a.home_article:hover { border-color: var(--bar); transform: translateY(-4px); box-shadow: 0 12px 26px rgba(38, 35, 31, 0.12); }
.instagram { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 18px); max-width: 700px; margin: 0 auto; }
.instagram a { display: block; overflow: hidden; border-radius: var(--radius-lg);
   box-shadow: 0 10px 24px rgba(38, 35, 31, 0.16), 0 2px 6px rgba(38, 35, 31, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease; }
.instagram img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.5s ease; }
.instagram a:hover { transform: translateY(-5px); box-shadow: 0 22px 40px rgba(38, 35, 31, 0.24), 0 4px 10px rgba(38, 35, 31, 0.12); }
.instagram a:hover img { transform: scale(1.05); }
.home_support p { max-width: 36em; margin-left: auto; margin-right: auto; }
.home_support_links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 1.5em; }
.home_support_links a { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
   background: var(--page); border: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none;
   transition: transform 0.2s ease, border-color 0.2s; }
.home_support_links a:hover { transform: translateY(-2px); border-color: var(--bar); }
.home_support_links img { margin-right: 8px; }
/* Fading up into view: outboard.js adds .reveal_on to <html> and .reveal to
   each block, then .shown as it scrolls in, and takes both off afterwards so
   the hover movements aren't held back by the delay. */
.reveal_on .reveal { opacity: 0; transform: translateY(28px);
   transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
   transition-delay: calc(var(--i, 0) * 90ms); }
.reveal_on .reveal.shown { opacity: 1; transform: none; }
@media screen and (max-width: 900px) {
   .home_paths, .video_cards { grid-template-columns: repeat(2, 1fr); }
   .home_articles { grid-template-columns: 100%; }
}
@media screen and (max-width: 767px) {
   /* Seven tabs don't fit across a phone, so the bar scrolls sideways. */
   div.mode { overflow-x: auto; scrollbar-width: none; }
   div.mode::-webkit-scrollbar { display: none; }
   div.mode div.tab, div.mode div.selectedtab { flex: none; padding: 8px 11px 9px; }
   .eddie { flex-direction: column; padding: 18px; }
   .eddie img { width: 96px; height: 96px; }
   .eddie label { text-align: center; }
   .eddie_box { width: 100%; }
   .home_paths { grid-template-columns: 100%; margin-bottom: 2.5rem; }
   .home_about { flex-direction: column; text-align: center; }
   .home_about img { max-width: 100%; width: 100%; }
}

/* The topic map (outboard.js, mapBox): cards with soft shadows that lift a
   little under the pointer. */
#render_topic_map svg { display: block; overflow: visible; margin: 0 auto; }
#render_topic_map .map_card { filter: drop-shadow(0 3px 6px rgba(38, 35, 31, 0.12)); transition: filter 0.2s ease; }
#render_topic_map a:hover .map_card { filter: drop-shadow(0 8px 16px rgba(38, 35, 31, 0.24)); }
#render_topic_map .map_here { filter: drop-shadow(0 6px 14px rgba(38, 35, 31, 0.3)); }
#render_topic_map .map_badge { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }