*, *::before, *::after { 
    box-sizing: border-box; 
}
html, body { 
    height: 100%; 
}
body { 
    margin: 0; 
    font-family: "Newsreader", Georgia, serif; 
    font-optical-sizing: auto; 
    color: #111; 
    background: #ffffff; 
    overflow: hidden; }

/* hide site content until intro completes */
#site { display: none; }

.intro {
    position: fixed;
    inset: 0;
    height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel {
    position: absolute;
    left: 50%;
    top: calc(45vh + 3vh);
    transform: translateX(-50%);
    width: min(800px, 92vw);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 10px;
    text-align: center;
}
.panel h2 {
    margin: 6px 0 8px;
    font-size: clamp(28px, 4.2vw, 42px);
    font-family: "Shadows Into Light", cursive;
}
.panel p {
    margin: 0;
    line-height: 1.55;
    font-size: clamp(14px, 1.9vw, 17px);
    color: #2a2a2a;
}

.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}
.buttons {
    display: flex;
    gap: 10px;
}
.btn-text, .btn-primary, .btn-secondary, button {
    appearance: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 6px 10px;
    cursor: pointer;
    font-family: "Shadows Into Light", cursive;
    font-weight: 400;
    font-size: clamp(16px, 2.2vw, 20px);
    color: #0f62fe;
    text-decoration: underline wavy #0f62fe;
    text-underline-offset: 3px;
}
.btn-primary {
    color: #0f62fe;
    text-decoration-color: #0f62fe;
}
.btn-text.is-active {
    color: #0b4bd4;
    text-decoration-color: #0b4bd4;
}
.btn-secondary {
    color: #6aa6ff;
    text-decoration-color: #6aa6ff;
}
.btn-text {
    color: #7bb3ff;
    text-decoration-color: #7bb3ff;
    padding: 6px 8px;
}
.btn-text:hover, .btn-primary:hover, .btn-secondary:hover, button:hover {
    opacity: .85;
}


.doc-fab {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    display: none;
}

.progress {
    height: 6px;
    width: 100%;
    background: #f1f3f7;
    border-radius: 999px;
    overflow: hidden;
}
.progress > i {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0f62fe, #33a1ff);
    transition: width 700ms ease;
}

.stage {
    position: relative;
    height: 45vh;
    margin-top: 0;
}
.trail {
    position: absolute;
    inset: 0 0 0 0;
    width: 100%;
    height: 100%;
}

#trail-path-small {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: smallWaveBob 3.6s ease-in-out infinite;
}
@keyframes smallWaveBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

.ship {
    position: absolute;
    left: 0;
    top: 0;
    width: min(22vw, 220px);
}
.ship img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.15));
}

@media (max-width: 480px) {
    .ship { width: 40vw; }
    .panel { padding: 14px; }
}

/* site layout after intro */
.site-layout {
    display: block;
}
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 24vw;
    min-width: 260px;
    height: 100vh;
    padding: 24px;
    background: rgba(123, 179, 255, 0.08);
    border-right: 1px solid #eee;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 5;
}
.site-title {
    margin: 0 0 6px;
    font-family: "Shadows Into Light", cursive;
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.05;
}
.site-subtitle {
    margin: 0 0 12px;
    font-family: "Shadows Into Light", cursive;
    color: #7bb3ff;
    font-size: clamp(16px, 2.2vw, 20px);
}
.site-desc {
    margin: 0 0 16px;
    color: #2a2a2a;
    font-size: 15px;
    line-height: 1.5;
}
.site-note {
    margin: 0 0 16px;
    color: #6b7280; /* muted */
    font-size: 13px;
    line-height: 1.45;
}

/* theme overrides for sidebar text colors based on hovered category */
.theme-pink .site-title,
.theme-pink .site-subtitle,
.theme-pink .site-desc { color: #b2146d; }
.theme-pink .site-note { color: #8a1057; }

.theme-blue .site-title,
.theme-blue .site-subtitle,
.theme-blue .site-desc { color: #0f62fe; }
.theme-blue .site-note { color: #1b4fd1; }

.theme-green .site-title,
.theme-green .site-subtitle,
.theme-green .site-desc { color: #0b7a3b; }
.theme-green .site-note { color: #096233; }

/* yellow for other / mixed freight */
.theme-yellow .site-title,
.theme-yellow .site-subtitle,
.theme-yellow .site-desc { color: #9a7a00; }
.theme-yellow .site-note { color: #7a6200; }
.sidebar {
    display: flex;
    flex-direction: column;
}
.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}

.content {
    margin-left: 24vw;
    padding: 16px;
    height: 100vh;
    overflow: hidden;
}

.view-canvas {
    position: relative;
    left: 0;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3604 / 2268; 
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
    transform: scale(1.02);
    transform-origin: left center;
    will-change: transform;
}
.view-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.home-waves {
    position: fixed;
    left: 24vw; 
    right: 0;
    bottom: 0;
    height: 140px;
    z-index: 1; 
    pointer-events: none;
}
.home-trail {
    width: 100%;
    height: 100%;
    display: block;
}



.year-select {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: #ffffffcc;
    backdrop-filter: blur(4px);
    border: 1px solid #e6efff;
    border-radius: 8px;
    padding: 6px 10px;
    color: #0f62fe;
    font-family: "Shadows Into Light", cursive;
    font-size: 18px;
    display: none;
}


.view-fabs {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: none; 
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}
.view-fabs .btn-text {
    background: transparent;
    /* Outline only outside using multi-directional shadows; fill (text color) sits above */
    -webkit-text-stroke: 0; /* disable stroke fill overlay */
    text-shadow:
        0 3px 0 #ffffff,
        0 -3px 0 #ffffff,
        3px 0 0 #ffffff,
        -3px 0 0 #ffffff,
        3px 3px 0 #ffffff,
        -3px 3px 0 #ffffff,
        3px -3px 0 #ffffff,
        -3px -3px 0 #ffffff,
        0 0 4px #ffffff,
        0 0 6px #ffffff; /* larger halo */
}