.u-stripe { font-weight: 200; font-size: 2em; margin: 0; }
.u-tangerine { font-family: "Tangerine", cursive; font-weight: 700; font-style: normal; }

.Icon { width: 56px; max-width: 7vw; aspect-ratio: 1; margin-bottom: 10px; }
.Icon--center { margin-left: auto; margin-right: auto; }
.Icon svg { width: 100%; height: 100%; object-fit: contain; }

.Header { position: fixed; background-color: rgba(0,0,0,0); }

.FastoLoader { z-index: 1000; gap: var(--grid-gutter); pointer-events: none; }
.FastoLoader__Title { opacity: 0; z-index: 2; }
.FastoLoader__Fatso { height: 60vh; max-width: 90%; width: auto; position: relative;  opacity: 0; z-index: 2; }
.FastoLoader__Fish { position: absolute; width: 30%; top: 33%; left: 50%; transform: translateX(-50%); }
.FastoLoader__Fish svg:nth-of-type(2) { transform: scale(-1); margin-top: -5%; } /* Flip the fish */
.FastoLoader__BG { width: 100%; height: 100%; background: #000; position: absolute; top: 0; left: 0; z-index: 1; }

.FastoLoader__BellyAnchor{
  position:absolute;
  left: 50%;
  top: 54%;
  width: 2px;
  height: 2px;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
}

/* .logged-in .Species { position: relative; z-index: 10001 !important; } */

.Sidebar { top: var(--hh); left: 0; z-index: 100; height: calc(100vh - var(--hh)); gap: var(--grid-gutter); padding-bottom: 1em; width: 10vw; }

/* Vertical Nav */
.Species__Nav ul { padding-left: var(--grid-gutter); margin: 0; }
.Species__Nav li { position: relative; transition: all 0.3s ease-out; padding: 0; margin: 0; }
.Species__Nav li a { display: inline-block; min-height: 15vh; padding: 0 0 1em 10px; color: currentcolor; transition: all 0.15s ease-out; }
.Species__Nav li a:after { content: ""; display: block; border-left: 1px solid currentcolor; border-top: 1px solid currentcolor; height: 100%; width: var(--grid-gutter); position: absolute; left: calc(var(--grid-gutter) * -1); top: 0.5em; transition: width 0.15s ease-in-out; }
.Species__Nav li:last-child a:after { height: 0; }
.Species__Nav li a:hover,
.Species__Nav li a:focus { background-color: transparent; padding-left: 1em; }

.Species__NavCounter { transition: all 0.15s ease-out; }
.Species__NavTitle,
.Species__NavBody { width: 100%; overflow: hidden; margin: 0; transition: height 0.3s ease-out, opacity 0.2s ease-out; }
.Species__NavTitle { font-size: 32px; white-space: nowrap; }
.Species__NavBody { font-size: 18px; }

.Species__Nav.condense .Species__NavBody,
.Species__Nav.condense .Species__NavTitle { height: 0; opacity: 0; }

.Species__Nav .active { pointer-events: none; padding-left: calc(var(--grid-gutter) * 2); }
.Species__Nav .active .Species__NavCounter,
.Species__Nav li a:hover .Species__NavCounter { font-size: 2em; }
.Species__Nav .active .Species__NavTitle,
.Species__Nav li a:hover .Species__NavTitle { height: 40px; opacity: 1; overflow: visible; }
.Species__Nav .active .Species__NavBody,

.Species__Nav li a:hover .Species__NavBody { height: 100px; opacity: 1; overflow: visible; }
.Species__Nav .active:after,
.Species__Nav li a:hover:after { width: calc(var(--grid-gutter) * 2); }

@media (max-width: 980px) {
  .Species__Nav.condense .Species__NavBody,
  .Species__Nav.condense .Species__NavTitle { display: none; }
  .Species__Nav ul,
  .Species__Nav li a { padding-left: 5px; }
  .Species__Nav li a:after { width: 5px; left: -5px; }
  .Species__Nav .active { padding-left: 10px; }
  .Species__Nav .active:after, .Species__Nav li a:hover:after { width: 10px; }
  .Species__Nav .active .Species__NavCounter, .Species__Nav li a:hover .Species__NavCounter { font-size: 1.5em; }

}

section { width: 100%; position: relative; overflow: hidden; }

/* Sections */
.Section { position: relative; min-height: 100vh; min-height: 100dvh; width: 100%; }
.Section__Inner { width: 80%; min-height: 100vh; min-height: 100dvh; max-width: 1500px; position: relative; margin: 0 auto; padding: var(--hh) 0; z-index: 1; }
.Section__Intro { position: relative; max-width: 100%; z-index: 2; margin-bottom: min(120px, 13vh); }

/* Media */
.Species__Video { width: 177.78vh; /* 100 * (16 / 9) */ height: 100vh;  }
@media (min-aspect-ratio: 16/9) { 
  .Species__Video { width: 100vw; height: 56.25vw; /* 100 / (16 / 9) */ } 
}
.Species__Video.playing { pointer-events: none; } /* prevent control bar appearing on hover after played */

/* TIMEBAR */
.Species__Timeline { padding: 0 0 80px 0; gap: 20px; }
.Timeline__Track { height: 20px; background: #e6e9ef; border-radius: 999px; overflow: visible; box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
.Timeline__Cut { width: 1px; height: 100%; background: #000; position: absolute; top: 0; }
.Timeline__Progress { height: 100%; width: 0%; background: var(--color-blue); border-radius: 999px; transform-origin: left center; }
.Timeline__Marker { --size: 20px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: var(--size); height: var(--size); border-radius: 50%; border: 2px solid var(--color-orange); background: #fff; background: var(--color-orange); cursor: default; outline: none; box-shadow: 0 0 0 0 rgba(255,0,0,0.2); transition: box-shadow 0.25s ease, background-color 0.25s ease, transform 0.25s ease; }
.Timeline__Marker.is-active { background: var(--color-orange); background: #fff; box-shadow: 0 0 0 8px rgba(79,70,229,0.15); transform: translate(-50%, -50%) scale(1.15); }
.Timeline__Marker::after { content: attr(data-label); position: absolute; top: -36px; top: calc(100% + 15px); left: 50%; transform: translateX(-50%); font-size: 12px; min-width: 100px; /* white-space: pre-line; */ white-space: pre-wrap; padding: 4px 8px; border-radius: 8px; background: #fff; color: #000; opacity: 0; pointer-events: none; }
.Timeline__Marker.is-active::after { opacity: 1; }
.Timeline__Marker:has(+ .is-active)::after { opacity: 0; }

/* Event captions below the track - not used currently 
.Timeline__Events { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 2vw, 16px); margin: 16px 0 0; padding: 0; list-style: none; color: #fff; opacity: 0.85; }
.Timeline__Events li { opacity: 0.35; transition: opacity 0.25s ease; }
.Timeline__Events li.is-active { opacity: 1; }
*/

@media (min-width: 980px) {
  .Species__Timeline { padding-right: 130px; }
  .Timeline__Update { width: 100px; position: absolute; top: 0; right: 0; }
}

/* FISH */
.Species__Story { gap: 50px; }
.Species__Info { margin: 0; flex: 0 0 auto; }
#Species__Image { width: 100%; flex: 1 1 auto; transform-origin: left center; position: relative; z-index: 1; }
.Species__Keywords { margin-top: 90px; }
@media (max-width: 980px) {
  .Species__Keywords { margin-top: 50px; }
}

@media (min-width: 980px) {
    #Species__Image img { max-height: calc(100vh - 600px); }
}

/* FISHER FARMER */
#Species__FisherFarmer { width: 300px; max-width: 50%; margin: 0 auto 15px; transform-origin: top center; }
.Fisher__Story { margin-top: 15px; gap: 90px; }

/* Country */
.Screen { overflow: hidden; }
.Screen .Media { max-width: 100vw; position: relative; top: 0; left: 0; }
.Screen .u-fullscreen { background: #000; }
.Screen .u-fullscreen .Section__Intro { visibility: hidden; }
@media (min-width: 980px) {
  .Screen .u-fullscreen .Section__Intro { display: none; }
}
.Country__Text { font-size: max(16px, 1.5vw); }

/* Map */
#Species__Map { height: 100vh; width: 100%; }
.gm-style-iw-chr { display: none; }
.gm-style-iw-d { padding-top: 10px; }
.gm-style-iw-d h3,
.gm-style-iw-d p { color: #000; }

/* Sustainability */
.Cards { padding: 90px 0 50px; }
.Card { --spacing: 50px; position: relative; top: 50%; padding: var(--grid-gutter); background: #222; border: 1px solid #fff; border-radius: 30px; text-align: center; width: 500px; height: 250px; max-width: 100%; margin: 0 0 50px 0; z-index: 3 }
.Card:nth-child(2) { top: calc(50% + var(--spacing)); background: #333; }
.Card:nth-child(3) { top: calc(50% + var(--spacing) * 2); background: #444; }
.Card:nth-child(4) { top: calc(50% + var(--spacing) * 3); background: #555; }
.Card:nth-child(5) { top: calc(50% + var(--spacing) * 4); background: #666; }

#fin .u-tangerine { font-size: 20vh; }
.Sparkles { position: absolute; inset: 0; pointer-events:none; overflow:visible; }
.Sparkles i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: currentColor; color:#ffd166; }