/* A continuous route for any number of units, ending at the materials harbour. */
.module-hero .module-kicker{font-size:14px;line-height:1.5;letter-spacing:0;text-transform:none;font-weight:600;max-width:640px}.materials-back{margin-top:8px}
.module-map-empty{text-align:center;font-size:15px;color:var(--muted);margin:0 auto 38px}
/* Stable scattered positions, following one meandering route. */
.module-voyage{position:relative;max-width:960px;margin:0 auto;isolation:isolate;padding:30px 0 65px}
.module-trail{--tile:164px;list-style:none;padding:0;margin:0;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(230px,auto);gap:0 16px;align-items:start}
.trail-stop{grid-column:var(--map-column);grid-row:var(--map-row);position:relative;padding:0;margin:0;min-width:0;--stop-x:50%;margin-top:var(--offset,0px)}
.trail-stop:nth-child(6n+1){--offset:65px;--stop-x:48%}
.trail-stop:nth-child(6n+2){--offset:0px;--stop-x:46%}
.trail-stop:nth-child(6n+3){--offset:35px;--stop-x:40%}
.trail-stop:nth-child(6n+4){--offset:90px;--stop-x:48%}
.trail-stop:nth-child(6n+5){--offset:50px;--stop-x:52%}
.trail-stop:nth-child(6n+6){--offset:30px;--stop-x:48%}
.trail-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}
.trail-connections path{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:8 9;stroke-linecap:round}
.trail-tile{--accent:#f6e9c7;position:relative;left:var(--stop-x);transform:translateX(-50%);width:var(--tile);min-height:calc(var(--tile)*.89);display:grid;place-items:center;text-decoration:none;isolation:isolate;filter:drop-shadow(0 5px 0 #56738312);transition:filter .2s}
.trail-tile .hex-outline path{stroke:#667b7c;stroke-width:1.7}
.trail-tile-face{padding:25px 12%;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0;width:100%}
.trail-tile h3{font-size:19px;line-height:1.2;letter-spacing:-.025em;margin:0;hyphens:auto;overflow-wrap:anywhere}
.trail-tile-face>.icon{width:18px;height:18px;opacity:.65}
.trail-tile:hover,.trail-tile:focus-visible{filter:drop-shadow(0 8px 7px #37597030)}
.trail-tile:hover .hex-outline path{fill:#fff2d2;stroke:#284e5d}
.trail-tile:focus-visible{outline:3px solid #146581;outline-offset:6px;border-radius:35%}
.trail-tile .station-check{right:9px;top:4px;width:26px;height:26px}
.trail-lighthouse{position:absolute;width:96px;left:calc(var(--stop-x) + 78px);top:-48px;pointer-events:none}
.trail-finish:is(:nth-child(6n+5),:nth-child(6n+6)) .trail-lighthouse{left:calc(var(--stop-x) - 174px)}
.voyage-ship{position:absolute;left:1%;top:5px;width:95px;pointer-events:none;animation:map-bob 9s ease-in-out infinite}
.voyage-ship img{width:100%;height:auto}
.module-page .sea-life>.map-ship{display:none}
@media(min-width:761px) and (max-width:1000px){.module-trail{--tile:145px;column-gap:0}.trail-tile h3{font-size:17px}.trail-lighthouse{width:78px;left:calc(var(--stop-x) + 66px)}.trail-finish:is(:nth-child(6n+5),:nth-child(6n+6)) .trail-lighthouse{left:calc(var(--stop-x) - 144px)}}
@media(max-width:760px){
 .module-page .map-birds:not(.flock-two):not(.flock-three){top:520px;right:1%;left:auto;width:32px}
 .module-voyage{padding:42px 0 35px}
 .module-trail{--tile:clamp(112px,33vw,150px);display:block}
 .trail-stop:nth-child(n){margin:0;min-height:155px;--stop-x:24%}
 .trail-stop:nth-child(6n+2){--stop-x:76%;min-height:145px}
 .trail-stop:nth-child(6n+3){--stop-x:43%;min-height:170px}
 .trail-stop:nth-child(6n+4){--stop-x:77%;min-height:150px}
 .trail-stop:nth-child(6n+5){--stop-x:25%;min-height:165px}
 .trail-stop:nth-child(6n+6){--stop-x:58%;min-height:160px}
 .trail-stop.trail-finish{--stop-x:30%;min-height:165px}
 .trail-tile h3{font-size:clamp(14px,3.8vw,18px)}
 .trail-tile-face{padding:20px 12%;gap:8px}
 .trail-tile-face>.icon{width:16px;height:16px}
 .trail-stop.trail-finish .trail-lighthouse{width:85px;left:calc(var(--stop-x) + 75px);top:-10px}
 .voyage-ship{width:66px;left:54%;top:-5px}
}
@media(prefers-reduced-motion:reduce){.voyage-ship{animation:none}.trail-tile{transition:none}}

.module-hero-materials h1{margin-bottom:16px}

/* More vertical breathing room, with materials below every learning island. */
@media(min-width:761px){
 .module-trail{grid-template-rows:repeat(var(--lesson-rows),minmax(285px,auto)) auto;grid-auto-rows:auto}
 .trail-stop.trail-finish{--offset:0px;--stop-x:48%}
 .trail-stop.trail-finish .trail-lighthouse{left:calc(var(--stop-x) - 174px)}
}
@media(min-width:761px) and (max-width:1000px){.trail-stop.trail-finish .trail-lighthouse{left:calc(var(--stop-x) - 144px)}}

/* Compact, opaque resource rows remain distinct from the sea behind them. */
.materials-page .resource-section{max-width:1000px;margin-bottom:32px}
.materials-page .resource-section h2{font-size:22px;margin-bottom:16px;gap:10px}
.materials-page .resource-list{display:grid;gap:10px;margin:0}
.materials-page .resource-list li,.materials-page .resource-list li:first-child{border:0}
.materials-page .resource-list a{gap:14px;padding:15px 18px;min-height:72px;background:#fffdf8;border:1px solid #a9c2c8;border-radius:12px;box-shadow:0 3px 0 #5673830a}
.materials-page .resource-list a:hover{background:#fbf1d7;border-color:#78989f}
.materials-page .resource-symbol{width:34px;height:34px;background:#f4e9ca;border-radius:10px}
.materials-page .resource-symbol .icon{width:18px;height:18px}
.materials-page .resource-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 20px;align-items:center}
.materials-page .resource-copy strong{grid-column:1;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.materials-page .resource-copy>span{grid-column:1;font-size:13px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.materials-page .resource-copy small{grid-column:2;grid-row:1 / span 2;max-width:210px;font-size:11px;line-height:1.4;margin:0;color:#506a75}
.materials-page .resource-list a>.icon{width:18px;height:18px;flex:none;color:#46616a}
.materials-page .empty-message{padding:18px 20px;background:#fffdf8;border:1px dashed #a9c2c8;border-radius:12px;font-size:14px}
@media(max-width:760px){
 .materials-page .resource-section h2{font-size:20px}
 .materials-page .resource-list a{padding:13px;gap:11px;align-items:start}
 .materials-page .resource-copy{display:flex;gap:3px;align-items:stretch}
 .materials-page .resource-copy small{max-width:none;margin-top:2px}
 .materials-page .resource-list a>.icon{margin-top:8px}
 .materials-page .resource-symbol{width:30px;height:30px}
}